Polymer - 自定义元素

Polymer 自定义元素 - 从简单和简单的步骤学习聚合物，从基本概念到高级概念，包括概述，安装，元素，自定义元素，Shadow DOM和样式，事件，数据系统。

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

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

您可以使用ES6类定义自定义元素，并且可以将类与自定义元素如下面的代码所示.

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

自定义元素可用作标准元素，如下所示 :

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

自定义元素生命周期

自定义元素生命周期提供一组自定义元素反应，负责元素生命周期的变化，并在下表中定义.

Sr.No.	Reactions&说明
1	构造函数当您创建元素或定义先前创建的元素时，将调用此元素反应.
2	connectedCallback 当您向文档添加元素时，将调用此元素反应.
3	disconnectedCallback 当你从文档中删除元素，将调用此元素反应.
4	attributeChangedCallback 每当您更改，追加，删除或替换文档中的元素时，元素反应将被调用.

元素升级

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

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

非自定义 : 有效的自定义元素名称是内置元素或未知元素，不能成为自定义元素.
undefined : 去;该元素可以具有有效的自定义元素名称，但无法定义.
自定义 : 该元素可以有一个有效的自定义元素名称，可以定义和升级.
失败 : 尝试升级无效类的失败元素.

定义元素

自定义可以通过创建扩展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 namewindow.customElements.define(ElementDemo.is, ElementDemo);// create an instance with createElementvar 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 : 它包含Polymer基类和辅助元素，它们包含在1.x polymer.html中.

定义元素主HTML文档

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

示例

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

         Polymer Example

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

输出

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

polymer serve

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

聚合物定义元素

定义遗产元素

Legacy元素可用于使用Polymer函数注册元素，该函数将原型用于新元素.原型应该包含 is ，它定义了自定义元素的HTML标记名称.

示例

//registering an elementElementDemo = 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 instancevar myelement1 = document.createElement('element-demo');//use the constructor create an instancevar myelement2 = new ElementDemo();

生命周期回调

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

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

已创建 : 在设置属性值和初始化本地DOM之前创建元素时会调用它.
ready : 在设置属性值并初始化本地DOM之后创建元素时会调用它.
附加 : 将元素附加到文档后调用它，并且可以在元素的整个生命周期中调用多次.
分离 : 在从文档中分离元素之后调用它，并且可以在元素的整个生命周期中多次调用它.
attributeChanged : 去;当元素的属性发生变化时会调用它，并且它保持属性更改，这些属性更改与声明的属性不兼容.

声明属性

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

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

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

Sr.No.	Key&描述	输入
1	类型从属性中反序列化其属性type是使用类型的构造函数确定的.	constructor(Boolean，Date，Number，String，Array或Object)
2	值它指定属性的默认值，如果它是一个函数，则它使用返回值作为属性的默认值.	布尔值，数字，字符串或函数.
3	reflectToAttribute 如果此键设置为true，则设置相应的属性在主机节点上.如果将属性值设置为布尔值，则可以将该属性创建为标准HTML布尔属性.	boolean
4	readOnly 如果此键设置为true，则无法通过赋值或数据绑定直接设置属性.	布尔值
5	通知您可以将该属性用于双向数据绑定，如果此键设置为true并且更改属性时属性名称-changed事件将被触发.	boolean
6	计算您可以计算通过调用方法和值，参数的值随时更改，将简化为方法名称和参数列表.	string
7	观察者调用方法名称，该名称由a简化值，当属性值改变时.	string

属性反序列化

根据指定的类型和元素实例上的相同属性名，反序列化与实例上的属性匹配的属性名称，如果属性在属性对象中配置.

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

配置布尔属性

可以通过标记配置布尔属性，通过将其设置为false并且如果将其设置为true，则无法从标记进行配置，因为具有或不具有值的属性均衡为true.因此，它被称为Web平台中属性的标准行为.

可以通过将它们以JSON格式传递为 : 来配置对象和数组属性;

 < element-demo player ='{"name":"Sachin"，"country":"India"}'>

配置默认属性值

可以使用属性对象中的值字段配置默认属性，它可能是原始值，还是返回值的函数.

示例

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

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

输出

运行应用程序，如上例所示，然后导航到 http://127.0.0.1:8000/的.以下是输出.

聚合物配置默认属性值

读取-only属性

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

示例

以下示例描述了read的使用属性对象中的-only属性.创建一个index.html文件并在其中添加以下代码

          Polymer Example

现在，创建另一个名为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/的.以下是输出.

Polymer Read Only Properties

点击后按钮，它将更改值，如下面的屏幕截图所示.