srcmini本文概述
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);我们可以使用自定义元素作为标准元素：
<element-demo></element-demo>注意：自定义元素名称应以小写字母开头, 并且名称之间应包含短划线。
自定义元素生命周期
自定义元素生命周期提供了一组自定义元素反应, 这些反应负责改变元素生命周期
以下是这些自定义元素反应的列表：
表：
| Index | Reactions | Description |
|---|---|---|
| 1) | constructor | 创建元素或定义先前创建的元素时, 将调用此元素的反应。 |
| 2) | connectedCallback | 将元素添加到文档时, 将调用此元素的反应。 |
| 3) | disconnectedCallback | 从文档中删除元素时, 将调用此元素的反应。 |
| 4) | attributeChangedCallback | 每当你更改, 追加, 删除或替换文档中的元素时, 都会调用该元素的反应。 |
元素升级
在通过规范定义自定义元素之前, 我们可以使用自定义元素, 并且通过向该元素添加定义, 该元素的任何现有实例将升级为该自定义类。
自定义元素状态包含以下值-
未自定义：有效的自定义元素名称是内置元素或未知元素, 它们不能成为自定义元素。
未定义：元素可以具有有效的自定义元素名称, 但是无法定义。
自定义：元素可以具有有效的自定义元素名称, 可以对其进行定义和升级。
失败：尝试升级无效类的失败元素。
定义元素
我们可以通过创建一个扩展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：用于指定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 = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel = "import" href = "bower_components/polymer/polymer.html">
<link rel = "import" href = "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>输出
评论前必须登录！
注册