介绍
Custom Elements 是 Web Components 规范的一部分，是一种自定义 HTML 元素的方法。自定义元素可以像原生 HTML 元素一样使用，与框架无关，具有高度的可重用性和可维护性。Custom Elements 是现代前端开发中不可或缺的一部分。
本文将介绍 Custom Elements 的开发方式，并提供示例代码和详细的指导意义，帮助读者更好地理解和使用 Custom Elements。
Polymer
在介绍 Custom Elements 之前，我们先来了解一下 Polymer。Polymer 是 Google 推出的一套 Web Components 框架，提供了一系列的组件和工具，使得 Web Components 的开发更加简单和高效。
Polymer 中的组件是基于 Custom Elements 实现的，因此我们需要先了解 Custom Elements 的开发方式。
Custom Elements
定义 Custom Elements
定义 Custom Elements 需要使用 window.customElements.define 方法。该方法接受两个参数：元素名称和元素类。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-- -----------
-
------------------- -
-- -------------
-
---------------------- -
-- --------------
-
------------------------------ --------- --------- -
-- -------------
-
-
------------------------------------------ -----------在上面的代码中，MyElement 类继承了 HTMLElement 类，并实现了 constructor、connectedCallback、disconnectedCallback 和 attributeChangedCallback 四个方法。
constructor 方法用于初始化元素，connectedCallback 方法在元素添加到文档时调用，disconnectedCallback 方法在元素从文档中移除时调用，attributeChangedCallback 方法监听元素属性变化。这些方法都是 Custom Elements 的生命周期函数，可以在其中进行相应的操作。
window.customElements.define 方法用于定义 Custom Elements，第一个参数是元素名称，第二个参数是元素类。
使用 Custom Elements
定义好 Custom Elements 后，我们可以像使用原生 HTML 元素一样使用它。例如：
<my-element></my-element>
上面的代码中，我们使用了自定义的 my-element 元素。
Shadow DOM
Shadow DOM 是 Web Components 规范的另一部分，它提供了一种封装元素内部的方法，使得元素内部的 DOM 树与外部的 DOM 树隔离开来。这种隔离使得元素内部的样式和行为不会影响到外部的页面，同时也可以避免外部的样式和行为影响到元素内部。
在 Custom Elements 中使用 Shadow DOM 需要使用 attachShadow 方法。该方法接受一个参数，表示 Shadow Root 的类型。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
-- - ------ --- --------
-
-
------------------------------------------ -----------在上面的代码中，我们使用 attachShadow 方法创建了一个 Shadow Root，并将其赋值给 shadowRoot 变量。mode 参数可以是 open 或 closed，表示 Shadow Root 是否可以被外部访问。
元素属性
Custom Elements 中的元素属性可以使用 attributeChangedCallback 方法进行监听。例如：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------ --- -------------------- -
------ ---------
-
------------------------------ --------- --------- -
-- ----- --- ------- -
-- ------
-
-
-
------------------------------------------ -----------在上面的代码中，我们使用 observedAttributes 方法指定了需要监听的属性名称，然后在 attributeChangedCallback 方法中处理属性变化。
元素事件
Custom Elements 中的元素事件可以使用 addEventListener 方法进行监听。例如：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
------------------------------ -- -- -
-- ------
---
-
-
------------------------------------------ -----------在上面的代码中，我们使用 addEventListener 方法监听了 click 事件，并在回调函数中处理了点击事件。
示例代码
下面是一个简单的示例，展示了如何定义一个 Custom Element，并在其中使用 Shadow DOM。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- -------- ----------
-------
------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
----- --- - ------------------------------
------------- - ------- --------
----- ----- - --------------------------------
----------------- - -
--- -
----------------- --------
-------- -----
-
--
------------------------------
----------------------------
-
-
------------------------------------------ -----------
---------
-------
-------在上面的代码中，我们定义了一个 my-element 元素，并在其中使用了 Shadow DOM。在 Shadow DOM 中，我们创建了一个 div 元素，并添加了一些样式。
总结
Custom Elements 是 Web Components 规范的一部分，是一种自定义 HTML 元素的方法。自定义元素可以像原生 HTML 元素一样使用，与框架无关，具有高度的可重用性和可维护性。Custom Elements 是现代前端开发中不可或缺的一部分。
在本文中，我们介绍了 Custom Elements 的开发方式，包括定义 Custom Elements、使用 Custom Elements、Shadow DOM、元素属性和元素事件。同时，我们也提供了示例代码和详细的指导意义，帮助读者更好地理解和使用 Custom Elements。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657c0cd5d2f5e1655d6cc395