随着 Web 技术的不断发展，前端开发的重要性也越来越受到关注。其中，Custom Elements 和 Shadow DOM 是两个非常重要的概念，它们的结合应用可以帮助我们更好地实现组件化开发，提高代码的可重用性和可维护性。
Custom Elements
Custom Elements 是 Web Components 的一部分，它允许开发者创建自定义的 HTML 元素。通过自定义元素，我们可以将一个复杂的 UI 组件封装起来，然后在应用中多次使用。Custom Elements 提供了几个重要的 API：
customElements.define()：定义一个自定义元素。connectedCallback()：当元素被插入到文档中时调用。disconnectedCallback()：当元素从文档中移除时调用。attributeChangedCallback()：当元素的某个属性发生变化时调用。
下面是一个简单的示例，定义了一个自定义元素 my-element，并在其中添加了一个属性 name：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- -------- ----------
-------
------
----------- -------------------------
----------- -------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
-
------------------- -
------------------- --------------------------------
-
-
----------------------------------- -----------
---------
-------
-------在上面的示例中，我们定义了一个 MyElement 类，它继承自 HTMLElement，并实现了 connectedCallback() 方法。当 my-element 元素被插入到文档中时，connectedCallback() 方法会被调用，输出 Hello, John! 和 Hello, Mary!。
Shadow DOM
Shadow DOM 是另一个非常重要的概念，它可以让我们创建一个独立的 DOM 子树，与主文档的 DOM 分开。这样做有几个好处：
- 隔离样式：Shadow DOM 中的样式不会影响到主文档。
- 封装行为：Shadow DOM 中的 JavaScript 代码只能访问到 Shadow DOM 内部的元素，不能访问到主文档中的元素。
- 保持干净：Shadow DOM 中的 HTML 不会被主文档的 CSS 或 JavaScript 修改。
Shadow DOM 也提供了一些重要的 API：
Element.attachShadow()：创建一个 Shadow DOM。ShadowRoot.innerHTML：设置 Shadow DOM 的 HTML 内容。ShadowRoot.querySelector()：在 Shadow DOM 中查找元素。ShadowRoot.host：获取 Shadow DOM 的宿主元素。
下面是一个简单的示例，创建了一个 Shadow DOM：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- --- ----------
-------
------
---- ---------------------
--------
----- --------- - -------------------------------------
----- ---------- - ------------------------ ----- ------ ---
-------------------- - -
-------
- -
------ ----
-
--------
--------- ------ --------
--
---------
-------
-------在上面的示例中，我们通过 Element.attachShadow() 方法创建了一个 Shadow DOM，并通过 ShadowRoot.innerHTML 设置了 Shadow DOM 的 HTML 内容。可以看到，页面上只显示了 Hello, Shadow DOM!，并且文字颜色为红色。
结合应用
Custom Elements 和 Shadow DOM 的结合应用可以帮助我们更好地实现组件化开发。我们可以将自定义元素封装在 Shadow DOM 中，这样就可以隔离样式和行为。下面是一个示例，演示了如何创建一个带有 Shadow DOM 的自定义元素：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- -------- - ------ --- ----------
-------
------
---------------- ---------------
--------
----- -------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
-------------------- - -
-------
------ -
----------------- --------
------ -----
------- -----
-------------- ----
-------- --- -----
---------- -----
------- --------
-
--------
------------------------------
--
-
-
---------------------------------- ----------
---------
-------
-------在上面的示例中，我们定义了一个 MyButton 类，它继承自 HTMLElement，并实现了 constructor() 方法。在 constructor() 方法中，我们先调用了 super() 方法，然后通过 Element.attachShadow() 方法创建了一个 Shadow DOM，并将其赋值给了 this.shadowRoot 属性。在 Shadow DOM 中，我们定义了一个样式和一个按钮，通过 <slot> 标签将自定义元素的内容插入到按钮中。
最后，我们通过 customElements.define() 方法将 MyButton 类注册为 my-button 自定义元素。在页面上使用 <my-button> 标签时，会自动创建一个带有 Shadow DOM 的按钮，并将 <slot> 标签中的内容插入到按钮中。
总结
Custom Elements 和 Shadow DOM 是 Web Components 的两个重要概念，它们的结合应用可以帮助我们更好地实现组件化开发。Custom Elements 允许我们创建自定义的 HTML 元素，而 Shadow DOM 可以让我们创建一个独立的 DOM 子树，与主文档的 DOM 分开。通过将自定义元素封装在 Shadow DOM 中，我们可以隔离样式和行为，实现更高效的开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6577e912d2f5e1655d1b2679