Polymer 自定义元素

2025年3月17日 | 阅读 3 分钟

Polymer.js 框架方便您使用标准 HTML 元素创建自定义元素。

自定义元素的特性

它方便您命名自定义元素并关联类。
当您更改自定义元素实例的状态时，它将请求生命周期回调。
如果您更改实例上的属性，则将请求回调。

您可以使用 ES6 类定义自定义元素。类可以像这样与自定义元素关联

//ElementDemo class is extending the HTMLElement 
class ElementDemo extends HTMLElement { 
   // code here
};
//link the new class with an element name
window.customElements.define('element-demo', ElementDemo);

我们可以将自定义元素用作标准元素

注意：自定义元素名称应以小写字母开头，并且在名称之间包含破折号。

自定义元素生命周期

自定义元素生命周期提供了一组自定义元素反应，这些反应负责元素生命周期中的更改

以下是这些自定义元素反应的列表

表

索引	反应	描述
1)	构造函数	当您创建一个元素或定义先前创建的元素时，将调用此元素的反应。
2)	connectedCallback	当您将元素添加到文档时，将调用此元素的反应。
3)	disconnectedCallback	当您从文档中删除元素时，将调用此元素的反应。
4)	attributeChangedCallback	每当您从文档中更改、附加、删除或替换元素时，都会调用此元素的反应。

元素升级

我们可以在规范定义它们之前使用自定义元素，并且通过向该元素添加定义，可以将元素的任何现有实例升级到自定义类。

自定义元素状态包含以下值 -

未定制：有效的自定义元素名称可以是内置元素或未知元素，无法成为自定义元素。

未定义：该元素可以具有有效的自定义元素名称，但无法定义它。

自定义：该元素可以具有有效的自定义元素名称，可以定义和升级它。

失败：尝试升级无效类的失败元素。

定义元素

我们可以通过创建一个扩展 Polymer.Element 的类来定义自定义元素，并将该类传递给 customElements.define 方法。该类包含一个 is getter 方法，该方法返回自定义元素的 HTML 标签名称。

例如

//ElementDemo class is extending the Polymer.Element 
class ElementDemo extends Polymer.Element {
   static get is() { return 'element-demo'; }
   static get properties() {
      . . .
      . . .
   }
   constructor(){
      super();
      . . .
      . . .
   }
   . . .
   . . .
}
//Associate the new class with an element name
window.customElements.define(ElementDemo.is, ElementDemo);
// create an instance with createElement
var el1 = document.createElement('element-demo');

导入和 API

我们可以通过指定三个 HTML 导入来定义 Polymer 元素

polymer-element.html：它用于指定 Polymer Element 基类。

legacy-element.html：它用于使用 Polymer. Legacy Element 基类扩展 Polymer.Element，并添加 1.x 兼容的旧版 API。它还通过定义旧版 Polymer() 工厂方法来创建混合元素。

polymer.html：它用于包含 Polymer 基类以及辅助元素，这些元素包含在 1.x polymer.html 中。

在主 HTML 文档中定义元素

HTMLImports.whenReady() 函数用于在主 HTML 文档中定义元素。

示例

让我们以一个示例来说明如何在主 HTML 文档中定义元素。创建一个 index.html 文件并使用以下代码

<!doctype html>
<html lang = "en">
   <head>
      <title>Polymer Example</title>
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "bower_components/polymer/polymer.html">
      <link rel = "import" href = "define-element.html">
   </head> 
   <body>
      <define-element></define-element>
   </body>
</html>

现在创建一个名为 define-element.html 的自定义元素，并使用以下代码。

<dom-module id = "define-element">
   <template>
      <h2>Hello JavaTpoint!!</h2>
   </template>
   <script>
      HTMLImports.whenReady(function(){
         Polymer ({
            is: "define-element"
         })
      })  
   </script>
</dom-module>

输出