javascript - 将 html 传递给 polymer 元素

Question

从 polymer 文档( https://www.polymer-project.org/1.0/docs/devguide/properties )我找到了如何将参数传递给这样的元素:

<script>

  Polymer({

    is: 'x-custom',

    properties: {
      userName: String
    }

  });

</script>

<x-custom user-name="Scott"></x-custom>

但是也可以传递html吗？例如

<my-element>
     <h1>Hello world<h2>
</my-element>

我已经用 polymer 创建了一个“我的元素”，并且想向其中添加内容。 polymer 元素的唯一目的是设置内部所有内容的样式(h1)。

Answer 1

您可以使用 <content> 来执行此操作内置于 polymer 中的元素。这允许您为某些子内容创建插入点。例如使用 <content> 声明一个元素元素:

<dom-module id="my-element">
  <template>
    <style>
      ::content h1 {
        color: red;
      }
    </style>

    <content></content>
  </template>

  <script>
    Polymer({
      is: 'my-element'
    });
  </script>
</dom-module>

然后使用这个元素:

<my-element>
  <h1>This heading is red</h1>
</my-element>

以下是有关 content 的更多信息标签以及 styling内容。