通关 Web Component 新手入门的第一关：概念篇

2023-11-25 23:34:35

Web Component 是 W3C 标准支持的一项组件化方案，它允许我们创建可复用的组件，并对其进行精细化的控制。Web Component 由三部分组成：

HTML Templates：用于定义组件的结构和外观。
Custom Elements：用于定义组件的行为和功能。
Shadow DOM：用于将组件的样式和行为与其他部分隔离。

Web Component 的主要优势在于：

可重用性：组件可以被多次使用，无需重复编写代码。
可组合性：组件可以被组合成更复杂的组件。
可维护性：组件可以独立维护，无需影响其他部分。
性能：组件可以被浏览器独立加载和执行，从而提高性能。

下面，我们通过一个简单的例子来入门 Web Component：

<html>
  <head>
    <script>
      // 定义一个自定义元素
      class MyElement extends HTMLElement {
        constructor() {
          super();

          // 创建一个影子 DOM
          const shadow = this.attachShadow({ mode: 'open' });

          // 在影子 DOM 中添加内容
          const template = document.getElementById('template');
          const content = template.content.cloneNode(true);
          shadow.appendChild(content);

          // 添加事件监听器
          this.addEventListener('click', () => {
            alert('Hello, world!');
          });
        }
      }

      // 注册自定义元素
      customElements.define('my-element', MyElement);
    </script>
  </head>
  <body>
    <!-- 使用自定义元素 -->
    <my-element></my-element>
  </body>
</html>