📜  聚合物自定义元素

📅  最后修改于: 2021-01-08 01:15:20             🧑  作者: Mango

聚合物定制元素

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

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

 

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

自定义元素生命周期

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

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

表:

Index Reactions Description
1) constructor This element’s reaction is called when you create an element or define the previously-created element.
2) connectedCallback This element’s reaction is called when you add an element to a document.
3) disconnectedCallback This element’s reaction is called when you remove an element from a document.
4) attributeChangedCallback This element’s reaction is called whenever you change, append, remove, or replace an element from a document.

元素升级

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

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

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

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

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

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

定义一个元素

我们可以通过创建一个扩展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文件,并使用以下代码:



   
      Polymer Example
      
      
      
    
   
      
   

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


   
   

输出: