将 html 传递给聚合物元素

Question

从聚合物文档 (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>

我在聚合物中创建了一个 'my-element' 并想向其中添加内容。聚合物元素的唯一目的是为内部的所有内容设置样式（h1）。

Answer 1

您可以使用 Polymer 中内置的 <content> 元素来执行此操作。这允许您为某些子内容创建插入点。例如使用 <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 tag as well as styling的内容。

将 html 传递给聚合物元素

pass html to polymer element

html

javascript

polymer

polymer-1.0