Web Components 懒人入门指南

2023-11-19 02:49:44

“老生常谈——组件化（Component-Based Development）”

“组件化” 无疑已成为前端开发的基石之一，得益于其诸多优势：清晰的架构、更好的复用性、可维护性以及更高的开发效率等。如何创建一个可重用的组件？目前前端界主流的方案是创建基于 React 或 Vue 组件库，虽然它们的功能强大、易于上手，但不少人仍然会有使用 JavaScript 框架的顾虑：它们往往会带来更多的依赖项和复杂性，需要学习新的编程范式和相关的工具。

Web Components 作为 Web 平台的新标准，为我们提供了一种创建可重用组件的另一种方式，它与任何特定的 JavaScript 框架无关，也就是说，它可以独立于任何 JavaScript 框架使用，你可以在 Vue、React 等框架中使用它们，也可以在没有框架的应用程序中使用它们。它也是一个轻量级的解决方案，不会带来任何额外的依赖项或复杂性，更重要的是，Web Components 是跨浏览器的，意味着你编写的组件可以在任何支持 Web Components 的浏览器中使用。

Web Components 三剑客

Custom Elements： 它允许你在 HTML 中定义你自己的元素，并将它们与自定义行为相关联。
Shadow DOM： 它创建一个隔离的 DOM，允许你隐藏组件的内部细节，使组件更加封装和可重用。
HTML Imports： 它允许你将 HTML 模板导入到你的组件中，使组件更易于管理和维护。

好，那我们如何开始呢？

创建自定义元素： 使用 document.registerElement() 方法或 class 语法来创建自定义元素。
定义元素的行为： 使用 JavaScript 来定义元素的行为，包括事件处理、数据绑定和样式。
使用 Shadow DOM： 使用 attachShadow() 方法来创建 Shadow DOM，并将元素的内部细节隐藏在 Shadow DOM 中。
导入 HTML 模板： 使用 HTML Imports 来导入 HTML 模板到你的组件中。

示例：

<template id="my-component">
  <div>
    <h1>This is my component</h1>
    <p>This is the content of my component</p>
  </div>
</template>

<script>
  // Define the custom element
  class MyComponent extends HTMLElement {
    constructor() {
      super();

      // Create a shadow DOM
      const shadow = this.attachShadow({ mode: 'open' });

      // Import the HTML template
      const template = document.getElementById('my-component');
      const content = template.content.cloneNode(true);

      // Append the template content to the shadow DOM
      shadow.appendChild(content);
    }
  }

  // Register the custom element
  customElements.define('my-component', MyComponent);
</script>