基本元素结构

我们得到以下非常基本的元素 my-element 保存为 src/my-element.html

<link rel="import" href="bower_components/polymer/polymer.html">

<dom-module id="my-element">

  <template>
    <style>
      /* local styles go here */
      :host {
        display: block;
      }
    </style>
    <!-- local DOM goes here -->
    <content></content>
  </template>

  <script>
    Polymer({
      /* this is the element's prototype */
      is: 'my-element'
    });
  </script>

</dom-module>

• <link> 包含使用 HTML 导入的 Polymer 库。
• <dom-module> 是元素的本地 DOM 包装器（在本例中为 my-element）。
• <template> 是实际的本地 DOM 定义。
• <template> 中的 <style> 允许你定义作用于此元素及其本地 DOM 的样式，并且不会影响文档中的任何其他内容。
• <content> 将保存你元素中的任何内容。
• :host 伪类与自定义元素（my-element）匹配。
• Polymer 调用注册该元素。
• is 属性是元素的名称（它必须与 <dom-module> 的 id 相匹配）

你可以使用以下方法在应用中导入它：

<link rel="import" href="src/my-element.html">

并将其用作标记：

<my-element>Content</my-element>