Custom Elements 奇怪的 Bug：取不到 Shadow DOM 中的子元素-JavaScript中文网-JavaScript教程资源分享门户

Custom Elements 奇怪的 Bug：取不到 Shadow DOM 中的子元素

在前端开发中，我们使用 Custom Elements 来定义自己的 HTML 元素，以便在自己的应用程序中使用。然而，在使用 Custom Elements 过程中，我们会遇到奇怪的 Bug，即无法访问 Shadow DOM 中的子元素。这个 Bug 的原因是什么呢？本文将为您详细分析。

Shadow DOM 的介绍

Shadow DOM 是 Web Components 标准的一部分，用于在 DOM 树的内部创建独立的作用域。在这个作用域内部，我们可以定义自己的 HTML 元素、CSS 样式和 JavaScript 行为。这样做可以避免全局变量的命名冲突和样式污染等问题，提高了应用程序的可维护性。

Shadow DOM 的基本结构如下：

// javascriptcn.com 代码示例
<root-element>
  #shadow-root
    <style>
      /* Shadow DOM 中的样式 */
    </style>
    <content>
      <!-- Shadow DOM 中的内容 -->
    </content>
</root-element>

其中，<root-element> 是自定义元素的外部容器，#shadow-root 是 Shadow DOM 的根节点，<style> 是 Shadow DOM 中定义的样式，<content> 是 Shadow DOM 中的内容。

访问 Shadow DOM 中的子元素

在使用 Custom Elements 定义自己的 HTML 元素时，我们通常需要访问 Shadow DOM 中的子元素，以便进行更复杂的操作。例如，我们可能需要向 Shadow DOM 中的子元素添加事件监听器、修改样式等。

然而，我们会发现无法直接访问 Shadow DOM 中的子元素。例如，当我们使用 querySelector() 或 getElementById() 函数来查找 Shadow DOM 中的子元素时，会返回 null：

// javascriptcn.com 代码示例
<my-element>
  #shadow-root
    <div id="child-element">Hello, World!</div>
</my-element>

<script>
  class MyElement extends HTMLElement {
    constructor() {
      super();

      const shadow = this.attachShadow({ mode: 'open' });
      shadow.innerHTML = `
        <div id="child-element">Hello, World!</div>
      `;

      const childElement = shadow.querySelector('#child-element');
      console.log(childElement); // null
    }
  }

  customElements.define('my-element', MyElement);
</script>

这个问题的解决方案是使用 queryShadowRoot() 函数来访问 Shadow DOM 中的子元素。queryShadowRoot() 函数的定义如下：

// javascriptcn.com 代码示例
function queryShadowRoot(selector) {
  let element = this.shadowRoot.querySelector(selector);

  if (!element) {
    const slots = this.shadowRoot.querySelectorAll('slot');

    for (let i = 0; i < slots.length; i++) {
      const slot = slots[i];
      const nodes = slot.assignedNodes();

      for (let j = 0; j < nodes.length; j++) {
        const node = nodes[j];

        if (node.nodeType === Node.ELEMENT_NODE) {
          element = node.querySelector(selector);

          if (element) {
            return element;
          }
        }
      }
    }
  }

  return element;
}

这个函数首先在 Shadow DOM 根节点中查找给定的选择器，如果找到了就直接返回。如果没有找到，则遍历所有的 <slot> 元素，查找其分配的节点中是否存在满足选择器条件的元素。如果找到了，则返回该元素。如果都没有找到，则返回 null。

我们可以将 queryShadowRoot() 函数添加到自己的 Custom Element 中：

// javascriptcn.com 代码示例
<my-element>
  #shadow-root
    <div id="child-element">Hello, World!</div>
</my-element>

<script>
  class MyElement extends HTMLElement {
    constructor() {
      super();

      const shadow = this.attachShadow({ mode: 'open' });
      shadow.innerHTML = `
        <div id="child-element">Hello, World!</div>
      `;

      // 在这里添加 queryShadowRoot() 函数
      this.queryShadowRoot = queryShadowRoot.bind(this);

      const childElement = this.queryShadowRoot('#child-element');
      console.log(childElement); // <div id="child-element">Hello, World!</div>
    }
  }

  customElements.define('my-element', MyElement);
</script>

可以使用 querySelector() 和 getElementById()

注意到前面的 querySelector() 和 getElementById() 函数返回的值均是 null，但这里的 queryShadowRoot() 可以让其返回正确的值。那么，当我们直接调用 querySelector() 和 getElementById() 时，会出现什么问题呢？实际上，在某些情况下，这两个函数是可以正常工作的。

具体来说，当我们在定义自己的 Custom Element 时，将 Shadow DOM 的外部容器作为根元素，就可以直接使用 querySelector() 或 getElementById() 查找 Shadow DOM 中的子元素：

// javascriptcn.com 代码示例
<my-element>
  #shadow-root
    <div id="child-element">Hello, World!</div>
</my-element>

<script>
  class MyElement extends HTMLElement {
    constructor() {
      super();

      const shadow = this.attachShadow({ mode: 'open' });
      shadow.innerHTML = `
        <slot></slot>
      `;

      this.innerHTML = `
        <div id="child-element">Hello, World!</div>
      `;

      const childElement = this.querySelector('#child-element');
      console.log(childElement); // <div id="child-element">Hello, World!</div>
    }
  }

  customElements.define('my-element', MyElement);
</script>

这里，我们使用 <slot> 元素将 Shadow DOM 中的内容插入到自定义元素的内部。然后，我们在自定义元素的构造函数中调用 querySelector() 函数，成功地找到了 Shadow DOM 中的子元素。在这种情况下，我们不需要使用 queryShadowRoot() 函数。

总结

在使用 Custom Elements 定义自己的 HTML 元素时，我们要注意访问 Shadow DOM 中的子元素。由于 Shadow DOM 的作用域独立于全局作用域，直接访问子元素可能会出现 Bug。为了避免这个问题，我们可以使用 queryShadowRoot() 函数来访问 Shadow DOM 中的子元素。如果我们将 Shadow DOM 的外部容器作为自定义元素的根元素，则可以直接使用 querySelector() 或 getElementById() 查找 Shadow DOM 中的子元素。

希望本文的分析能够帮助您理解 Custom Elements 的实现原理，并且能够在实际开发中避免访问 Shadow DOM 中子元素的 Bug。完整的示例代码如下：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Custom Elements 奇怪的 Bug：取不到 Shadow DOM 中的子元素</title>
  </head>
  <body>
    <my-element></my-element>

    <script>
      function queryShadowRoot(selector) {
        let element = this.shadowRoot.querySelector(selector);

        if (!element) {
          const slots = this.shadowRoot.querySelectorAll('slot');

          for (let i = 0; i < slots.length; i++) {
            const slot = slots[i];
            const nodes = slot.assignedNodes();

            for (let j = 0; j < nodes.length; j++) {
              const node = nodes[j];

              if (node.nodeType === Node.ELEMENT_NODE) {
                element = node.querySelector(selector);

                if (element) {
                  return element;
                }
              }
            }
          }
        }

        return element;
      }

      class MyElement extends HTMLElement {
        constructor() {
          super();

          const shadow = this.attachShadow({ mode: 'open' });
          shadow.innerHTML = `
            <div id="child-element">Hello, World!</div>
          `;

          // 在这里添加 queryShadowRoot() 函数
          this.queryShadowRoot = queryShadowRoot.bind(this);

          const childElement = this.queryShadowRoot('#child-element');
          console.log(childElement); // <div id="child-element">Hello, World!</div>
        }
      }

      customElements.define('my-element', MyElement);  
    </script>
  </body>
</html>

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64fafc5ff6b2d6eab31bcda3