持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情
我们可以使用Custom ELements顶一个一个HTML标签，Custom Elements主要由两种：
-
Autonomous custom elements （自主自定义标签）
- 这个继承自HTMLElement抽象类，是一个全新的元素，你可以直接把它们写成HTML标签的形式，来在页面上使用。例如
<popup-info>，或者是document.createElement("popup-info")这样。
- 这个继承自HTMLElement抽象类，是一个全新的元素，你可以直接把它们写成HTML标签的形式，来在页面上使用。例如
-
Customized built-in elements （自定义内建元素）
- 这个是继承已有的内建类，如继承自
<p>元素则继承HTMLParagraphElement，使用时，需要先写出基本的元素标签，并通过is属性指定custom element的名称。例如<p is="word-count">, 或者document.createElement("p", { is: "word-count" })。
- 这个是继承已有的内建类，如继承自
Custom Element标签的名称必须包含一个短横线 -
- my-elements是一个有效的元素名，但myelement便不是，因为这样可以确保Custom element元素与内建的HTML元素不出现冲突
创建一个Custom Elements
- 使用CustomElementRegistry.define()方法可以将一个类与一个自定义标签名进行关联，从而将这个标签像原生HTML标签一样使用。
CustomElementRegistry.define(name,constructor,options)
-
name: 自定义标签名称
-
constructor: 自定义元素构造器，也就是我们创建的类
-
options： 控制选择
- extends: 该元素继承自什么元素，Customized built-in elements需要用到该选项
Autonomous custom elements
- 首先定义一个实现我们需要功能的类
class FirstElement extends HTMLElement {
constructor() {
// 必须首先调用 super方法
super();
// 元素的功能代码写在这里
//创建一个根元素（如果script在元素创建前可用真实DOM,但必须调用this.append,但本质上这种行为是不符合HTML5标准的，此处还是应该使用shadowDOM）
//const root = document.createElement('div');
//将根元素与该类关联(不推荐)
//this.append(root)
//创建根元素使用root
const root = this.attcahShadow({mode: 'open'})
//设置监听事件
//....
//创建style标签声明样式
//....
//挂载其他DOM节点
//...
}
}
- 将自定义标签与类进行关联
customElements.define('first-element', FirstElement);
- 使用自定义元素
<first-element></first-element>
- 完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 使用该标签 -->
<first-element></first-element>
</body>
<script>
class FirstElement extends HTMLElement {
constructor() {
// 必须首先调用 super方法
super();
// 元素的功能代码写在这里
//创建一个根元素
const root = document.createElement('div');
//将根元素与该类关联
this.append(root)
//设置监听事件
//....
//创建style标签声明样式
//....
//挂载其他DOM节点
//...
}
}
//定义新的元素
customElements.define('first-element', FirstElement);
</script>
</html>
Customized built-in elements
- 创建方式与上述方式相似，直接给出完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 使用该标签 -->
<button is="expanding-button"></button>
<!-- 可继承原标签已有元素 -->
<button is="hello-button" disabled></button>
</body>
<script>
class ExpandingButton extends HTMLButtonElement {
constructor() {
// 必须首先调用 super方法
super();
// 元素的功能代码写在这里
//创建一个根元素
const root = document.createElement('div');
//将根元素与该类关联
this.append(root)
//设置监听事件
//....
//创建style标签声明样式
//....
//挂载其他DOM节点
//...
}
}
//定义新的元素
customElements.define('expanding-button', ExpandingButton, { extends: "button" });
</script>
</html>
