使用 Custom Elements 和 Shadow DOM 实现一个具有菜单功能的组件-JavaScript中文网-JavaScript教程资源分享门户

介绍

Custom Elements 和 Shadow DOM 是 Web Components 标准的重要组成部分，它们可以帮助我们创建自定义的 HTML 元素和隔离 DOM 结构，从而提升 Web 应用的可维护性和可重用性。

在本文中，我们将使用 Custom Elements 和 Shadow DOM 实现一个具有菜单功能的组件，该组件可以接受一组菜单项，并在用户点击时触发相应的事件。我们将探讨如何创建 Custom Elements、如何使用 Shadow DOM 隔离组件的样式和结构，以及如何将组件暴露给其他开发者使用。

实现步骤

创建 Custom Element

首先，我们需要创建一个 Custom Element，它将代表我们的菜单组件。我们可以使用 window.customElements.define() 方法来定义一个 Custom Element，该方法接受两个参数：元素名称和元素定义对象。

class MyMenu extends HTMLElement {
  constructor() {
    super();
  }
}

window.customElements.define('my-menu', MyMenu);

在上面的代码中，我们定义了一个名为 MyMenu 的类，它继承自 HTMLElement。然后，我们使用 window.customElements.define() 方法将该类注册为一个 Custom Element，其元素名称为 my-menu。

创建 Shadow DOM

接下来，我们需要创建 Shadow DOM，它将用于隔离组件的样式和结构。我们可以使用 this.attachShadow() 方法来创建 Shadow DOM，并将其附加到 Custom Element 上。

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

    this.attachShadow({ mode: 'open' });
  }
}

在上面的代码中，我们调用了 this.attachShadow() 方法，并传入了一个配置对象，其中 mode 属性设置为 'open'，表示 Shadow DOM 是公开的，可以从外部访问。

添加 HTML 和 CSS

现在，我们可以在 Shadow DOM 中添加 HTML 和 CSS，以实现菜单组件的样式和结构。我们可以使用 this.shadowRoot.innerHTML 属性来设置 Shadow DOM 的 HTML 内容，使用 <style> 标签来设置 CSS 样式。

// javascriptcn.com 代码示例
class MyMenu extends HTMLElement {
  constructor() {
    super();

    this.attachShadow({ mode: 'open' });

    this.shadowRoot.innerHTML = `
      <style>
        /* CSS 样式 */
      </style>

      <ul>
        <!-- 菜单项 -->
      </ul>
    `;
  }
}

在上面的代码中，我们在 Shadow DOM 中添加了一个 <ul> 元素，用于显示菜单项。

添加属性和方法

接下来，我们需要为菜单组件添加属性和方法，以便其他开发者可以使用它。我们可以使用 ES6 的 get 和 set 关键字来定义属性，使用类的原型方法来定义方法。

// javascriptcn.com 代码示例
class MyMenu extends HTMLElement {
  constructor() {
    super();

    this.attachShadow({ mode: 'open' });

    this.shadowRoot.innerHTML = `
      <style>
        /* CSS 样式 */
      </style>

      <ul>
        <!-- 菜单项 -->
      </ul>
    `;
  }

  // 菜单项属性
  get items() {
    return JSON.parse(this.getAttribute('items'));
  }

  set items(value) {
    this.setAttribute('items', JSON.stringify(value));
  }

  // 渲染菜单项
  render() {
    const items = this.items;

    // 渲染菜单项
  }
}

在上面的代码中，我们定义了一个名为 items 的属性，用于获取和设置菜单项。我们还定义了一个名为 render() 的方法，用于渲染菜单项。

添加事件监听器

最后，我们需要为菜单组件添加事件监听器，以便在用户点击菜单项时触发相应的事件。我们可以使用 this.shadowRoot.querySelector() 方法来获取菜单项元素，并使用 element.addEventListener() 方法来添加事件监听器。

// javascriptcn.com 代码示例
class MyMenu extends HTMLElement {
  constructor() {
    super();

    this.attachShadow({ mode: 'open' });

    this.shadowRoot.innerHTML = `
      <style>
        /* CSS 样式 */
      </style>

      <ul>
        <!-- 菜单项 -->
      </ul>
    `;
  }

  // 菜单项属性
  get items() {
    return JSON.parse(this.getAttribute('items'));
  }

  set items(value) {
    this.setAttribute('items', JSON.stringify(value));
  }

  // 渲染菜单项
  render() {
    const items = this.items;
    const list = this.shadowRoot.querySelector('ul');

    // 清空菜单项
    list.innerHTML = '';

    // 渲染菜单项
    items.forEach(item => {
      const li = document.createElement('li');
      li.textContent = item.label;

      li.addEventListener('click', () => {
        this.dispatchEvent(new CustomEvent('item-click', {
          detail: item.value
        }));
      });

      list.appendChild(li);
    });
  }
}

在上面的代码中，我们使用 this.shadowRoot.querySelector() 方法获取了 <ul> 元素，然后使用 list.innerHTML = '' 清空了菜单项。接着，我们使用 items.forEach() 方法遍历菜单项，并为每个菜单项创建了一个 <li> 元素。最后，我们使用 li.addEventListener() 方法为菜单项添加了一个点击事件监听器，并在点击时触发了一个名为 item-click 的自定义事件。

示例代码

下面是完整的示例代码，包括 HTML 和 JavaScript 部分。你可以将它们保存在同一个文件中，并在浏览器中打开该文件来查看效果。

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <title>使用 Custom Elements 和 Shadow DOM 实现一个具有菜单功能的组件</title>
  </head>
  <body>
    <my-menu></my-menu>

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

          this.attachShadow({ mode: 'open' });

          this.shadowRoot.innerHTML = `
            <style>
              ul {
                list-style: none;
                margin: 0;
                padding: 0;
              }

              li {
                cursor: pointer;
                padding: 8px;
              }

              li:hover {
                background-color: #eee;
              }
            </style>

            <ul></ul>
          `;
        }

        // 菜单项属性
        get items() {
          return JSON.parse(this.getAttribute('items'));
        }

        set items(value) {
          this.setAttribute('items', JSON.stringify(value));
        }

        // 渲染菜单项
        render() {
          const items = this.items;
          const list = this.shadowRoot.querySelector('ul');

          // 清空菜单项
          list.innerHTML = '';

          // 渲染菜单项
          items.forEach(item => {
            const li = document.createElement('li');
            li.textContent = item.label;

            li.addEventListener('click', () => {
              this.dispatchEvent(new CustomEvent('item-click', {
                detail: item.value
              }));
            });

            list.appendChild(li);
          });
        }

        // 元素插入文档时调用
        connectedCallback() {
          this.render();
        }

        // 属性变化时调用
        attributeChangedCallback(name, oldValue, newValue) {
          if (name === 'items') {
            this.render();
          }
        }

        // 监听属性变化
        static get observedAttributes() {
          return ['items'];
        }
      }

      window.customElements.define('my-menu', MyMenu);

      const menu = document.querySelector('my-menu');
      menu.items = [
        { label: '菜单项 1', value: 1 },
        { label: '菜单项 2', value: 2 },
        { label: '菜单项 3', value: 3 },
      ];

      menu.addEventListener('item-click', event => {
        console.log('点击了菜单项', event.detail);
      });
    </script>
  </body>
</html>

总结

在本文中，我们使用 Custom Elements 和 Shadow DOM 实现了一个具有菜单功能的组件，该组件可以接受一组菜单项，并在用户点击时触发相应的事件。我们学习了如何创建 Custom Elements、如何使用 Shadow DOM 隔离组件的样式和结构，以及如何将组件暴露给其他开发者使用。希望这篇文章对你有所帮助！

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6578ffebd2f5e1655d2eaf27