Custom Elements详解

自定义元素为作者构建自己的完整功能DOM元素提供了一种方法。虽然作者总是可以在他们的文档中使用非标准元素，但通过脚本编写或类似方法添加特定于应用程序的行为后，这些元素在历史上一直不符合要求，而且功能也不是很强大。通过定义自定义元素，作者可以通知解析器如何正确构建元素以及该类的元素如何对变化作出反应。

一、创建一个自定义元素

我们想要创建一个为了说明如何创建自主自定义元素，我们定义一个自定义元素，该元素封装为国家/地区标志呈现小图标。我们的目标是能够像这样使用它：

<flag-icon country="nl"></flag-icon>

为此，我们首先为自定义元素声明一个类，并扩展 HTMLElement

class FlagIcon extends HTMLElement {constructor() {super();this._countryCode = null;}static get observedAttributes() { return ["country"]; }attributeChangedCallback(name, oldValue, newValue) {// name will always be "country" due to observedAttributesthis._countryCode = newValue;this._updateRendering();}connectedCallback() {this._updateRendering();}get country() {return this._countryCode;}set country(v) {this.setAttribute("country", v);}_updateRendering() {// Left as an exercise for the reader. But, you'll probably want to// check this.ownerDocument.defaultView to see if we've been// inserted into a document with a browsing context, and avoid// doing any work if not.}
}
customElements .define（“ flag-icon ”，FlagIcon）;

使用方法

在html中直接使用

<flag-icon country="nl"></flag-icon>

使用js添加

const flagIcon = document.createElement("flag-icon")
flagIcon.country = "jp"
document.body.appendChild(flagIcon)const flagIcon = new FlagIcon()
flagIcon.country = "jp"
document.body.appendChild(flagIcon)

二、创建一个定制的内置元素

class PlasticButton extends HTMLButtonElement {constructor() {super();this.addEventListener("click", () => {alert('hello world')});}
}
customElements.define("button-hello", PlasticButton, { extends: "button" });

Custom Elements详解相关推荐

Echarts之甘特图type: ‘custom‘参数详解
甘特图 const groupData = XEUtils.groupBy(data, "eqpName"); //分组后的数据 const yAxisData = Object. ...
【云原生】Kubernetes CRD 详解（Custom Resource Definition）
文章目录一.概述二.定制资源 1)定制资源和定制控制器 2)定制控制器 3)Operator 介绍 1.Operator Framework 2.Operator 安装 3.安装 Operat ...
ArcGIS Engine中的Symbols详解
转自原文 ArcGIS Engine中的Symbols详解本文由本人翻译ESRI官方帮助文档.尊重劳动成果,转载请注明来源. Symbols ArcObjects用了三种类型的Symbol(符号样式 ...
LwIP 之六详解动态内存管理内存池（memp.c/h）
该文主要是接上一部分LwIP 之详解动态内存管理内存堆(mem.c/h),该部分许多内容需要用到上一篇的内容.该部分主要是详细介绍LwIP中的动态内存池.整个内存池的实现相较于内存堆来说,还是 ...
Java解析HTML之HTMLParser使用与详解
1.相关资料官方文档:http://htmlparser.sourceforge.NET/samples.html API:http://htmlparser.sourceforge.net/jav ...
Android热更新详解
一前言介绍正好最近又看到热更新,对以前Android 热修复核心原理:ClassLoader类加载机制做了点补充. 从16年开始开始,热修复技术开始在安卓界流行,它以classloader类加载机 ...
HTMLParser 使用详解
简介 htmlparser是一个纯的java写的html解析的库,它不依赖于其它的java库文件,主要用于改造或提取html.它能超高速解析html,而且不会出错.现在htmlparser最新版本为 ...
xcode各项配置详解
1.Xcode IDE概览说明:从左到右,依次是"导航窗格(Navigator)->边列(Gutter)->焦点列(Ribbon)->代码编辑窗口(Standard/Pr ...
SAP UI5 应用开发教程之一百零二 - SAP UI5 应用的打印(Print)功能实现详解试读版
一套适合 SAP UI5 初学者循序渐进的学习教程作者简介 Jerry Wang,2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今.Jerry 是 SAP 社区导师,S ...

Custom Elements详解

Custom Elements详解相关推荐

最新文章

热门文章