Polymerjs 自定义元素

本文概述

元素升级
定义元素
导入和API

Polymer.js框架可帮助你使用标准HTML元素创建自定义元素。
自定义元素的功能：

它有助于你使用关联的类来命名自定义元素。
当你更改自定义元素实例的状态时, 它将请求生命周期回调。
如果你更改实例的属性, 则将请求回调。

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

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

< element-demo> < /element-demo>

注意：自定义元素名称应以小写字母开头, 并且名称之间应包含短划线。自定义元素生命周期
自定义元素生命周期提供了一组自定义元素反应, 这些反应负责改变元素生命周期
以下是这些自定义元素反应的列表：
表：

Index	Reactions	Description
1)	constructor	创建元素或定义先前创建的元素时, 将调用此元素的反应。
2)	connectedCallback	将元素添加到文档时, 将调用此元素的反应。
3)	disconnectedCallback	从文档中删除元素时, 将调用此元素的反应。
4)	attributeChangedCallback	每当你更改, 追加, 删除或替换文档中的元素时, 都会调用该元素的反应。

元素升级在通过规范定义自定义元素之前, 我们可以使用自定义元素, 并且通过向该元素添加定义, 该元素的任何现有实例将升级为该自定义类。
【Polymerjs 自定义元素】自定义元素状态包含以下值-
未自定义：有效的自定义元素名称是内置元素或未知元素, 它们不能成为自定义元素。
未定义：元素可以具有有效的自定义元素名称, 但是无法定义。
自定义：元素可以具有有效的自定义元素名称, 可以对其进行定义和升级。
失败：尝试升级无效类的失败元素。
定义元素我们可以通过创建一个扩展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：用于指定Polymerjs 元素基类。
legacy-element.html：用于使用Polymer扩展Polymer.Element。传统元素基类, 并添加了1.x兼容的旧版API。它还通过定义传统的Polymer()工厂方法来创建混合元素。
polymer.html：它用于组成Polymerjs 基类以及辅助元素, 这些元素包含在1.x polymer.html中。
在主HTML文档中定义元素
HTMLImports.whenReady()函数用于在主HTML文档中定义元素。
例子
让我们以一个示例在主HTML文档中定义一个元素为例。创建一个index.html文件, 并使用以下代码：

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

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

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

输出