聚合物定制元素

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);

我们可以使用自定义元素作为标准元素：

注意：自定义元素名称应以小写字母开头，并且名称之间应包含短划线。

自定义元素生命周期

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

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

表：

元素升级

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

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

未自定义：有效的自定义元素名称是内置元素或未知元素，它们不能成为自定义元素。

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

自定义：元素可以具有有效的自定义元素名称，可以对其进行定义和升级。

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

定义一个元素

我们可以通过创建一个扩展Polymer.Element的类来定义自定义元素，并将其传递给customElements.define方法。该类包含的是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：用于指定聚合物元素基类。

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

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

在主HTML文档中定义元素

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

例

让我们以一个示例在主HTML文档中定义一个元素为例。创建一个index.html文件，并使用以下代码：

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

输出：