简介
自定义元素和 Shadow DOM 是 Web Components 中的两个核心概念。自定义元素让我们可以定义自己的 HTML 标签，而 Shadow DOM 则提供了一种隔离 DOM 的方式，保证自定义元素中的样式和事件不会影响到外部的 DOM 结构。在前端开发中，利用自定义元素和 Shadow DOM 可以实现模块化、复用性强的 UI 组件，提高开发效率。
本文会详细讲解自定义元素和 Shadow DOM 的使用方法，并提供相应的代码示例。
定义自定义元素
定义自定义元素需要使用 customElements.define 方法。该方法需要传入两个参数：第一个参数是自定义元素的名称（需要包括一个短横线），第二个参数是实现该元素的类。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-- ---
-
------------------- -
-- ----- --- -------
-
---------------------- -
-- --- --- ---------
-
------------------------------ --------- --------- -
-- -------------
-
-
----------------------------------- -----------如上所示，我们定义了一个名为 my-element 的自定义元素，并实现了一个 MyElement 类。该类继承自 HTMLElement，并定义了三个回调方法：connectedCallback、disconnectedCallback 和 attributeChangedCallback。
其中，connectedCallback 方法在元素被插入到 DOM 中时触发，可以在该方法中进行一些初始化操作；disconnectedCallback 方法在元素从 DOM 中移除时触发，可以在该方法中进行一些清理操作；attributeChangedCallback 方法在元素的属性变化时触发，可以在该方法中根据新的属性值更新元素的状态。
Shadow DOM
定义自定义元素后，我们可以在该元素中使用 Shadow DOM。Shadow DOM 提供了一个隔离的 DOM 环境，使得在 Shadow DOM 内部定义的样式和事件只对该元素内部有效，不会影响到外部的 DOM。这种隔离的方式能够有效地防止 CSS 样式和事件冲突。
使用 Shadow DOM 需要先创建一个 Shadow root，并将其附加到自定义元素上。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
-- - ------ --- --- --- --
----- --- - ------------------------------
--------------- - ------- --------
----------------------------
-
-
----------------------------------- -----------如上所示，我们通过 this.attachShadow 方法创建了一个 Shadow root，并将其附加到自定义元素上。此时，我们就可以在 Shadow DOM 中创建自己的 DOM 结构，并将其添加到 Shadow root 中。
需要注意的是，attachShadow 方法接受一个包含 mode 属性的配置对象。mode 可以取值为 open 或 closed。当 mode 为 open 时，外部的 JavaScript 代码可以访问到 Shadow DOM 中的元素和样式；当 mode 为 closed 时，外部的 JavaScript 代码无法访问到 Shadow DOM 中的元素和样式，但仍然可以通过 Shadow DOM 的事件机制与之交互。
DOM 和事件处理
在自定义元素中，我们可以通过 Shadow DOM 来处理 DOM 和事件。
获取 Shadow DOM 中的元素
获取 Shadow DOM 中的元素需要使用 this.shadowRoot.querySelector 方法。该方法与普通的 document.querySelector 方法类似，只不过是在 Shadow DOM 中进行查询。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
-- - ------ --- --- --- --
----- --- - ------------------------------
------------------------- -------------
----------------------------
-- -- ------ --- ----
----- --------- - ---------------------------------------
----------------------- -- ---- ------------------------
-
-
----------------------------------- -----------如上所示，我们通过 this.shadowRoot.querySelector 方法获取了 Shadow DOM 中的 .container 元素。
监听 Shadow DOM 中的事件
监听 Shadow DOM 中的事件需要使用 this.shadowRoot.addEventListener 方法。该方法与普通的 addEventListener 方法类似，只不过是在 Shadow DOM 中注册事件。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
-- - ------ --- --- --- --
----- ------ - ---------------------------------
------------------ - ------ -----
-------------------------------
-- -- ------ --- ----
-------------------------------- -- -- -
------------- -----------
---
-
-
----------------------------------- -----------如上所示，我们通过 this.shadowRoot.addEventListener 方法注册了 Shadow DOM 中 button 元素的 click 事件。当点击该按钮时，会弹出一个提示框。
总结
自定义元素和 Shadow DOM 是 Web 组件中的两个核心概念。通过自定义元素和 Shadow DOM，我们可以实现模块化、复用性强的 UI 组件，提高开发效率。
本文详细讲解了自定义元素和 Shadow DOM 的使用方法，并提供了相应的代码示例。希望可以帮助读者更好地掌握这两个概念，从而更好地应用它们到实际的前端开发工作中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6475483e968c7c53b025f763