什么是 Custom Elements 和 Shadow DOM？
Custom Elements 和 Shadow DOM 是 Web Components 的两个重要技术标准，它们能够帮助我们创建自定义的 UI 元素，并能够让这些元素与原生 HTML 元素一样使用。
Custom Elements 允许开发者创建自己的 HTML 标签，并能够给这些标签赋予各种属性和方法，从而创造出符合需求的自定义元素。
Shadow DOM 则允许我们控制和封装 DOM 元素的一部分，从而实现更好的样式和行为隔离。
如何使用 Custom Elements 和 Shadow DOM？
创建自定义元素
我们可以使用 customElements.define 方法来定义一个新的自定义元素：
----- -------- ------- ----------- -
------------------- -
-------------- - -
------------- -----------
--
-
-
---------------------------------- ----------在这个例子中，我们创建了一个名为 MyButton 的自定义元素，并将它的定义传递给了 customElements.define 方法。在自定义元素的定义中，我们可以定义该元素的 HTML 内容、CSS 样式和 JavaScript 行为等信息。
创建 Shadow DOM
要为自定义元素创建 Shadow DOM，我们需要使用 Element.attachShadow 方法来创建一个 Shadow DOM 节点，然后将自定义元素的内容添加到 Shadow DOM 中：
----- -------- ------- ----------- -
------------------- -
----- ------ - ------------------- ----- ------ ---
----- ------ - ---------------------------------
------------------ - ------ ----
---------------------------
-
-
---------------------------------- ----------在这个例子中，我们使用 attachShadow 方法创建了一个 Shadow DOM 节点，然后将 button 元素添加到了 Shadow DOM 中。
样式和行为隔离
使用 Shadow DOM 可以让我们实现更好的样式和行为隔离。在 Shadow DOM 中定义的样式和行为不会对外界产生影响，并且也不会受到外界的影响。
比如，我们可以在 Shadow DOM 中定义一个奇怪的按钮样式，而这个样式并不会影响到页面中其他的按钮：
----- -------- ------- ----------- -
------------------- -
----- ------ - ------------------- ----- ------ ---
----- ----- - --------------------------------
----------------- - -
------ -
------ ------
----------------- -------
------- --- ------ ----
-------------- -----
-
--
--------------------------
----- ------ - ---------------------------------
------------------ - ------ ----
---------------------------
-
-
---------------------------------- ----------在这个例子中，我们为 button 元素定义了一些奇怪的样式，并且将这些样式添加到了 Shadow DOM 的样式表中。这些样式只会应用到当前元素中的 button 元素，而不会影响到页面中其他的按钮。
总结
Custom Elements 和 Shadow DOM 是 Web Components 开发中非常重要的技术标准，它们能够帮助我们创建自定义的 UI 元素，并能够让这些元素与原生 HTML 元素一样使用。
在使用 Custom Elements 和 Shadow DOM 开发自定义元素时，我们需要先创建自定义元素的类，并且在类的 connectedCallback 方法中定义元素的 HTML 内容和 Shadow DOM。通过使用 Shadow DOM，我们可以实现更好的样式和行为隔离，从而让自定义元素更具可复用性和可维护性。
示例代码
完整的示例代码如下：
----- -------- ------- ----------- -
------------------- -
----- ------ - ------------------- ----- ------ ---
----- ----- - --------------------------------
----------------- - -
------ -
------ ------
----------------- -------
------- --- ------ ----
-------------- -----
-
--
--------------------------
----- ------ - ---------------------------------
------------------ - ------ ----
---------------------------
-
-
---------------------------------- ----------来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6477ae8e968c7c53b0413f08