Polymer是一个框架，允许使用标准HTML元素创建自定义元素。自定义Web元素提供以下功能-

• 它提供带有关联类的自定义元素名称。
• 当您更改自定义元素实例的状态时，它将请求生命周期回调。
• 如果您更改实例的属性，则将请求回调。

您可以使用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);

可以将custom元素用作标准元素，如下所示-

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

自定义元素生命周期

定制元素生命周期提供了一组定制元素反应，这些反应负责元素生命周期的变化，并在下表中进行了定义。

元素升级

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

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

• 未定制-有效的定制元素名称是内置元素或未知元素，它们不能成为定制元素。
• 未定义-元素可以具有有效的自定义元素名称，但无法定义。
• custom-元素可以具有有效的自定义元素名称，可以对其进行定义和升级。
• 失败-尝试升级无效类的失败元素。

定义元素

可以通过创建扩展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-它指定Polymer.Element基类。
• legacy-element.html-它使用Polymer.LegacyElement基类扩展Polymer.Element并添加了1.x兼容的遗留API。它还通过定义传统的Polymer()工厂方法来创建混合元素。
• polymer.html-它包含聚合物基类以及辅助元素，这些元素包含在1.x polymer.html中。

在主HTML文档中定义元素

您可以使用HTMLImports.whenReady()函数在主HTML文档中定义一个元素。

例

下面的示例演示如何在主HTML文档中定义元素。创建一个index.html文件并添加以下代码。

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

输出

要运行该应用程序，请导航到创建的项目目录并运行以下命令。

polymer serve

现在打开浏览器并导航到http://127.0.0.1:8081/ 。以下将是输出。

定义旧元素

传统元素可用于使用Polymer函数注册元素，该函数采用新元素的原型。原型应该包含是自定义元素定义的HTML标签。

例

//registering an element
ElementDemo = Polymer ({
   is: 'element-demo',
   
   //it is a legecy callback, called when the element has been created
   created: function() {
     this.textContent = 'Hello World!!!';
   }
});

//'createElement' is used to create an instance
var myelement1 = document.createElement('element-demo');

//use the constructor create an instance
var myelement2 = new ElementDemo();

生命周期回调

生命周期回调用于完成Polymer.Element类的内置功能的任务。 Polymer使用就绪回调，当Polymer完成创建和初始化DOM元素时将调用该回调。

以下是Polymer.js中的旧式回调列表。

• created-在设置属性值和初始化本地DOM之前创建元素时调用。
• ready-在设置属性值并初始化本地DOM之后创建元素时调用。
• 附加-在将元素附加到文档之后被调用，并且可以在元素的整个生命周期中多次调用。
• detached-从文档分离元素后调用它，并且在元素的整个生命周期中可以多次调用。
• attributeChanged-当元素的属性发生更改并且包含与声明的属性不兼容的属性更改时调用。

声明属性

可以在元素上声明属性，以在数据系统中添加默认值和其他特定功能，并且可以将它们用于指定以下功能-

• 它指定属性类型和默认值。
• 当属性值发生更改时，它将调用观察器方法。
• 它指定只读状态以停止对属性值的意外更改。
• 它提供对双向数据绑定的支持，该双向数据绑定会在您更改属性值时触发事件。
• 它是一个计算的属性，它根据其他属性动态地计算一个值。
• 更改属性值时，它会更新并反映相应的属性值。

下表显示了属性对象支持的每个属性的键。

属性反序列化

如果在属性对象中配置了属性，则根据指定的类型反序列化与实例上的属性匹配的属性名称，并在元素实例上反序列化该属性名称。

如果在属性对象中没有定义其他属性选项，则可以直接将指定的类型设置为属性的值。否则，它将为属性配置对象中的类型键提供值。

配置布尔属性

可以从标记配置Boolean属性，方法是将其设置为false，如果将其设置为true，则不能从标记进行配置，因为带有或不带有值的属性均等于true。因此，它被称为Web平台中属性的标准行为。

可以通过以JSON格式将对象和数组属性传递为-

配置默认属性值

可以使用properties对象中的value字段配置默认属性，它可以是原始值，也可以是返回值的函数。

例

以下示例描述了如何在properties对象中配置默认属性值。

//it specifies the start of an element's local DOM

   

   

输出

运行上一个示例中所示的应用程序，然后导航到http://127.0.0.1:8000/ 。以下将是输出。

只读属性

通过在属性对象中将readOnly标志设置为true，可以避免对生成的数据进行意外更改。元素使用约定_setProperty(value)的setter来更改属性值。

例

下面的示例描述了在属性对象中使用只读属性。创建一个index.html文件，并在其中添加以下代码

现在，创建另一个名为my-element.html的文件，并包含以下代码。

//it specifies the start of an element's local DOM

   

   

接下来，再创建一个名为prop-element.html的文件，并添加以下代码。

//it specifies the start of an element's local DOM

   
   
   

输出

运行上一个示例中所示的应用程序，然后导航到http://127.0.0.1:8081/ 。以下将是输出。

单击按钮后，它将更改值，如以下屏幕截图所示。

将属性反映到属性

通过将属性配置对象中的属性上的reflectToAttribute设置为true，可以将HTML属性与属性值同步。

属性序列化

在将属性反映或绑定到属性时，可以将属性值序列化为属性，默认情况下，可以根据值的当前类型对值进行序列化。

• 字符串-无需序列化。
• 日期或数字-使用toString序列化值。
• 布尔值-将显示的非值属性设置为true或false。
• 数组或对象-使用JSON.stringify序列化值。