在前端开发中，组件化是一个非常重要的概念。组件化能够将复杂的页面拆分成小的、可重用的组件，提高代码可维护性和可复用性。然而，在组件化开发中，不同组件之间的通信却是一个非常棘手的问题。本文将介绍如何使用 Custom Elements 和 Shadow DOM 实现跨组件通信的技巧，帮助开发者解决这个难题。
Custom Elements
Custom Elements 是 Web Components 规范中的一部分，可以让开发者定义自己的 HTML 元素。通过自定义元素，开发者可以创建具有自定义行为和样式的组件，从而实现更加灵活的组件化开发。
定义 Custom Elements
定义 Custom Elements 非常简单，只需要继承 HTMLElement 类，并在自定义元素的构造函数中定义元素的行为即可。例如，下面的代码定义了一个自定义元素 my-element：
class MyElement extends HTMLElement { constructor() { super(); this.innerHTML = 'Hello, world!'; } } customElements.define('my-element', MyElement);
在上面的代码中，我们定义了一个 MyElement 类继承自 HTMLElement，并在其构造函数中设置了元素的内容为 Hello, world!。最后，我们使用 customElements.define 方法将 MyElement 类注册为自定义元素 my-element。
使用 Custom Elements
在 HTML 中使用自定义元素非常简单，只需要像普通的 HTML 元素一样使用即可。例如，下面的代码使用了刚才定义的自定义元素：
<my-element></my-element>在页面中，这个元素将会显示为 Hello, world!。
与其他组件通信
在组件化开发中，组件之间的通信是非常重要的。为了实现组件间的通信，我们可以使用自定义事件和 CustomEvent。
下面的代码演示了如何在一个自定义元素中触发一个自定义事件：
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- ------------------------------ -- -- - ----- ----- - --- ----------------------- - ------- - -------- ------ ---- ------------ - --- -------------------------- --- - - ----------------------------------- -----------展开代码
在上面的代码中，我们在 MyElement 类的构造函数中添加了一个点击事件监听器。当用户点击这个元素时，我们创建了一个自定义事件 my-event，并通过 dispatchEvent 方法触发了这个事件。在创建自定义事件时，我们可以通过 detail 属性传递一些数据，这些数据可以在事件处理函数中使用。
下面的代码演示了如何在另一个自定义元素中监听这个自定义事件：
-- -------------------- ---- ------- ----- -------------- ------- ----------- - ------------- - -------- --------------------------------- ------- -- - ---------------------------------- --- - - ---------------------------------------- ----------------展开代码
在上面的代码中，我们定义了另一个自定义元素 another-element，并在其构造函数中添加了一个 my-event 事件的监听器。当 my-event 事件被触发时，我们可以通过事件对象的 detail 属性获取传递的数据，并在控制台中输出。
Shadow DOM
Shadow DOM 是 Web Components 规范中的另一部分，可以让开发者创建封装的组件内部 DOM 树，从而避免组件的样式和行为被外部 CSS 和 JavaScript 影响。
创建 Shadow DOM
创建 Shadow DOM 非常简单，只需要在自定义元素的构造函数中调用 this.attachShadow 方法即可。例如，下面的代码定义了一个有 Shadow DOM 的自定义元素：
class MyElement extends HTMLElement { constructor() { super(); const shadow = this.attachShadow({ mode: 'open' }); shadow.innerHTML = '<p>Hello, world!</p>'; } } customElements.define('my-element', MyElement);
在上面的代码中，我们在 MyElement 类的构造函数中调用了 this.attachShadow 方法，并传入了一个选项对象 { mode: 'open' }。这个选项对象指定了 Shadow DOM 的模式为 open，表示外部 JavaScript 可以访问 Shadow DOM 中的内容。最后，我们通过 shadow.innerHTML 设置了 Shadow DOM 中的内容为一个段落元素。
样式隔离
Shadow DOM 的一个重要功能是样式隔离。当我们在 Shadow DOM 中定义样式时，这些样式只会影响 Shadow DOM 内部的元素，而不会影响外部的元素。例如，下面的代码定义了一个有样式隔离的自定义元素：
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- ----- ------ - ------------------- ----- ------ --- ---------------- - ---------- ------------ ----- ----- - -------------------------------- ----------------- - - - - ------ ---- - -- -------------------------- - - ----------------------------------- -----------展开代码
在上面的代码中，我们在 Shadow DOM 中定义了一个段落元素的样式为红色。这个样式只会影响 Shadow DOM 中的段落元素，而不会影响外部的元素。
与其他组件通信
使用 Shadow DOM 时，我们可以通过自定义事件和 CustomEvent 实现组件间的通信，与使用 Custom Elements 时类似。
下面的代码演示了如何在一个有 Shadow DOM 的自定义元素中触发一个自定义事件：
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- ----- ------ - ------------------- ----- ------ --- ---------------- - -------------- ------------- ----- ------ - ------------------------------- -------------------------------- -- -- - ----- ----- - --- ----------------------- - ------- - -------- ------ ---- ------------ - --- -------------------------- --- - - ----------------------------------- -----------展开代码
在上面的代码中，我们在一个有 Shadow DOM 的自定义元素中添加了一个按钮，并在按钮的点击事件处理函数中触发了一个自定义事件。
下面的代码演示了如何在另一个自定义元素中监听这个自定义事件：
-- -------------------- ---- ------- ----- -------------- ------- ----------- - ------------- - -------- ----- ------ - ------------------- ----- ------ --- ---------------- - ---------- --------------------------------- ------- -- - ------------------------------------- - --------------------- --- - - ---------------------------------------- ----------------展开代码
在上面的代码中，我们定义了另一个自定义元素 another-element，并在其构造函数中添加了一个 my-event 事件的监听器。当 my-event 事件被触发时，我们可以通过事件对象的 detail 属性获取传递的数据，并在 Shadow DOM 中的段落元素中显示。
实现跨组件通信的技巧
使用 Custom Elements 和 Shadow DOM 可以实现组件化开发中的跨组件通信。下面是一些技巧，帮助开发者更好地使用 Custom Elements 和 Shadow DOM：
- 在自定义元素中使用自定义事件和
CustomEvent实现跨组件通信。 - 在有 Shadow DOM 的自定义元素中使用 Shadow DOM 实现样式隔离和更好的封装。
- 在自定义元素中使用
this.getAttribute和this.setAttribute方法实现组件属性的设置和获取。 - 在自定义元素中使用
this.addEventListener方法添加事件监听器，并使用this.removeEventListener方法移除事件监听器。 - 在自定义元素中使用
this.isConnected属性判断元素是否已经插入到文档中。 - 在自定义元素中使用
this.shadowRoot属性获取 Shadow DOM 根节点。
示例代码
下面是一个使用 Custom Elements 和 Shadow DOM 实现的简单选项卡组件的示例代码：
-- -------------------- ---- ------- ----- ----------- ------- ----------- - ------------- - -------- ----- ------ - ------------------- ----- ------ --- ----- ---- - -------------------------- ----- --------- - ------------ -- -------------------------------------------------- ------------------ ------ -- - ----------------------------- -- -- - ---------------------- ------------------------- - ------- - ----- - ---- --- --- ----- ----- - -------------------------------- ----------------- - - ----- - -------- ------ ------- --- ----- ----- - --- - -------- ----- - --- - - -------- ------ -------- ----- ---------------- ----- ------ ----- ------------- --- ----- ----- - --- ------------ - ------------- ----- - ---------- - -------- ----- -------- ----- - ----------------- - -------- ------ - -- -------------------------- ---------------- -- - ------------------- -- ------------------------------ ----------------------- ------ -- - ---- ----------------------- --- - - - ------- - ----------------------------- ------------ -- - ------------------- - ----- ---- - -------------------------- ----- --------- - ------------ -- -------------------------------------------------- ----------------------------------- ------- -- - ----- - ----- - - ------------- ------------------ --------- -- - -- --------- --- ------ - ---------------------------- -------------------------------------------- - ---- - ------------------------------- ----------------------------------------------- - --- --- - - ------------------------------------- -------------展开代码
在上面的代码中，我们定义了一个 TabsElement 类，继承自 HTMLElement，并实现了一个简单的选项卡组件。这个组件包含了一个 nav 元素和一组 div 元素，nav 元素中的每个 a 元素表示一个选项卡，div 元素表示一个选项卡面板。在组件的构造函数中，我们获取了所有选项卡和选项卡面板，并为每个选项卡添加了 click 事件监听器，在点击时触发了一个自定义事件 tab-change。在组件的 connectedCallback 方法中，我们为 tab-change 事件添加了处理函数，根据事件传递的数据显示对应的选项卡面板。
在 HTML 中使用这个组件非常简单，只需要像下面这样使用即可：
<tabs-element> <a href="#tab1">Tab 1</a> <a href="#tab2">Tab 2</a> <div id="tab1">Tab 1 content</div> <div id="tab2">Tab 2 content</div> </tabs-element>
在页面中，这个元素将会显示为一个选项卡组件，包含两个选项卡和对应的面板。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d97b7ea941bf713411ef58
