在现代 Web 开发中，Custom Elements 正变得越来越流行。Custom Elements 可以让开发者自定义 HTML 标签和属性，并在其中添加自己的功能，从而提高代码的可维护性和可重用性。Custom Elements 还允许开发者创建自己的 Shadow DOM，从而增强用户体验。本篇文章将介绍 Custom Elements 的自定义元素和新属性，并提供示例代码以帮助读者更好地理解。
自定义元素的基本知识
Custom Elements 允许开发者通过定义自己的 HTML 标签来扩展 Web 平台。Custom Elements 的自定义元素遵循以下命名规则：
- 元素名必须包含一个短横线，例如 "my-element"。
- 元素名必须全部小写。
- 元素名必须至少包含一个短横线以示区分。
定义自定义元素的方式有两种：继承 HTMLElement 类和使用自定义元素注册表。注册表允许开发者通过名称映射自定义元素类，这使得在多个文件或库中定义和注册自定义元素变得更加简单。
继承 HTMLElement 类的自定义元素
继承 HTMLElement 类的方式可以用于定义所有的自定义元素，这种方式需要自定义元素类定义一个构造函数，并将其注册为自定义元素。以下是一个简单的示例：
class MyElement extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'}).innerHTML = '<h1>Hello, World!</h1>';
}
}
customElements.define('my-element', MyElement);上面的代码定义了一个自定义元素 "my-element"，该元素包含一个 Shadow DOM，其内容为 <h1>Hello, World!</h1>。
使用自定义元素注册表的自定义元素
使用自定义元素注册表的方式更加灵活，因为它允许开发者在任何文件或任何时间使用相同的名称注册自定义元素。以下是一个简单的示例：
class MyElement extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'}).innerHTML = '<h1>Hello, World!</h1>';
}
}
customElements.define('my-element', MyElement);上面的代码定义了一个自定义元素 "my-element"，该元素包含一个 Shadow DOM，其内容为 <h1>Hello, World!</h1>。
新属性的添加和移除
Custom Elements 还允许开发者添加和移除给定元素的新属性。新属性可以通过监听 element.setAttribute() 和 element.removeAttribute() 方法来实现，这些方法将通知开发者新属性的添加和移除。以下是一个添加和移除新属性的示例：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------ --- -------------------- -
------ ---------
-
--- ------ -
------ --------------------------
-
--- ----------- -
-- ------- -
------------------------- -------
- ---- -
-----------------------------
-
-
------------------------------ --------- --------- -
-- ----- --- ------- -
----------- ------- ---- ----------- -- --------------
-
-
------------------- -
-- ----------- -
------------- ----------------
- ---- -
--------- - ------------ -- ---- --------
-
-
-
----------------------------------- -----------上面的代码定义了一个自定义元素 "my-element"，该元素含有一个 "name" 属性。元素的 connectedCallback() 将在自定义元素添加到文档后调用，它提示用户输入他们的名称，如果存在 "name" 属性，则包含该名称的问候语将显示在元素中。
自定义元素的 set 和 get 方法将同步更新属性的值。attributeChangedCallback() 方法将在自定义元素属性的值发生更改时调用。
总结
Custom Elements 为开发者提供了扩展现有 HTML 元素和创建新元素的能力。自定义元素可以通过两种方式实现：通过继承 HTMLElement 类和使用自定义元素注册表。Custom Elements 还允许开发者添加和移除元素的新属性，并使用 set 和 get 方法来同步更新属性的值。开发者可以通过监听 setAttribute() 和 removeAttribute() 方法来实现添加和移除新属性。
Custom Elements 是一项伟大且有用的功能，它可以帮助开发者更好地组织 Web 应用程序，并提高代码的可维护性和可重用性。希望这篇文章可以帮助读者更好地理解 Custom Elements 的自定义元素和新属性，并可以在实践中使用 Custom Elements。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66457d49d3423812e4377487