什么是 Custom Elements API？
Custom Elements API 是浏览器原生 API 的一部分，可以用于创建自定义的 HTML 元素。这些自定义元素可以像原生元素一样在 HTML 中使用，包括添加属性、使用 CSS 样式、操作 DOM 等。
使用 Custom Elements API 的好处
使用 Custom Elements API 可以带来以下好处：
- 模块化：自定义元素可以被认为是模块化组件，易于维护和重复使用。
- 开放性：自定义元素可以与 DOM 相结合，实现更加开放且互通的 Web 架构。
- 规范性：Custom Elements API 遵循 Web 标准，被浏览器原生支持，因此可以获得更好的兼容性和稳定性。
创建自定义元素
自定义元素可以使用 customElements.define() 方法进行创建。其中包括元素名称、继承对象、元素行为等属性配置：
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------- -
--------
-
------------------- -
-------------- - ----------- -------------
-
-
------------------------------------------ -----------------在这个示例中，我们使用 MyCustomElement 类来继承 HTMLElement ，并使用 connectedCallback() 事件来操作元素的 DOM 结构，最后使用 customElements.define() 方法来创建这个自定义元素。
自定义元素属性（Attributes）
自定义元素还可以添加属性用以传递参数和控制元素行为，这些属性可以通过 setAttribute() 方法来添加和更新，也可以使用 get attributes() 方法来获取所有属性的列表：
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------ --- -------------------- -
------ ---------
-
------------- -
--------
-
------------------------------ --------- --------- -
---------------------- --------- ------- ---- ------------- -- ----------------
-
------------------- -
-------------- - ----------- ------------------------------------
-
-
------------------------------------------ -----------------在这个示例中，我们使用 static get observedAttributes() 方法来声明需要观察的自定义元素属性。当这些属性发生变化时，attributeChangedCallback() 事件将会触发。在 connectedCallback() 事件中，我们使用 getAttribute() 方法来获取传入参数。在 HTML 中，我们可以使用 my-custom-element 元素并添加 name 属性来传入参数：
<my-custom-element name="Michael"></my-custom-element>
这将会在浏览器中呈现出 Hello, Michael! 文字。
自定义元素样式（CSS）
自定义元素可以使用 CSS 来控制样式和布局。在自定义元素类中，我们可以使用 this.attachShadow() 方法来创建 Shadow DOM，并在其中添加样式：
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
----- ----- - --------------------------------
----------------- - -
-- -
------ -----
------------ ------ -----------
---------- -----
----------- -------
-
--
------------------------------
----- ----- - -----------------------------
----------------- - ------- --------
------------------------------
-
-
------------------------------------------ -----------------在这个示例中，我们使用 this.attachShadow() 来创建 Shadow DOM，然后添加 style 元素来控制样式。我们还添加了 h1 标题元素作为示例。
总结
使用浏览器的 Custom Elements API 可以带来模块化、开放性和规范性等好处，同时也带来了更加丰富和灵活的 Web 开发体验。
通过创建自定义元素、使用属性来传递参数、使用 CSS 让元素更美观等操作，我们可以更加灵活地处理 DOM，使 Web 开发更加便捷和高效。
参考文献：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646b4198968c7c53b0aa4ad5