Custom Elements 和 Shadow DOM：实现跨组件通信的技巧-FunTeaLearn Online Web Tutorials

在前端开发中，组件化是一个非常重要的概念。组件化能够将复杂的页面拆分成小的、可重用的组件，提高代码可维护性和可复用性。然而，在组件化开发中，不同组件之间的通信却是一个非常棘手的问题。本文将介绍如何使用 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>

在页面中，这个元素将会显示为一个选项卡组件，包含两个选项卡和对应的面板。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d97b7ea941bf713411ef58

Custom Elements 和 Shadow DOM：实现跨组件通信的技巧

Custom Elements

定义 Custom Elements

使用 Custom Elements

与其他组件通信

Shadow DOM

创建 Shadow DOM

样式隔离

与其他组件通信

实现跨组件通信的技巧

示例代码

Feedback

程序员教程

程序员面试题库