Web Components vs 自定义元素-JavaScript中文网-JavaScript教程资源分享门户

Web Components 和自定义元素是现代前端开发领域中比较热门的两个概念，它们在实现可复用组件的方面都有非常大的作用。但是它们之间的区别却并不那么明显，甚至有时候被人们混淆使用。本文将详细讲解它们的概念、特点及在实际开发中应用的指导意义，同时还会附带代码示例。

Web Components

Web Components 是一种将 UI 组件封装起来，使其可以在多个应用程序中复用的技术，它包含了四个主要的规范：自定义元素、影子 DOM、HTML 模板和 HTML Import。

Web Components 最大的优势在于，它们能够将组件的代码、样式和行为全部打包在一起，以自定义元素的形式对外提供。由于自定义元素本质上就是 HTML 元素，因此 Web Components 一旦定义好，就可以跨域直接使用。Web Components 旨在解决 UI 组件复用的问题，提高开发效率和代码重用。

下面是一个 Web Components 的示例：

// www.javascriptcn.com code example
<custom-button></custom-button>

<script>
  class CustomButton extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({mode: 'open'});
      this.shadowRoot.innerHTML = `
        <style>
          button {
            background-color: blue;
            color: white;
            font-size: 16px;
            padding: 10px;
            border-radius: 5px;
          }
        </style>
        <button>
          <slot></slot>
        </button>
      `;
    }
  }
  customElements.define('custom-button', CustomButton);
</script>

这是一个自定义的 custom-button 元素，它的样式和一些行为都被封装在了内部。其他人可以直接通过 <custom-button></custom-button> 这样的代码使用。

自定义元素

自定义元素是一种新的 HTML 元素，可以用完全不同于普通 HTML 元素的方式定义和使用。它是 Web Components 里的一个核心规范，其中之一的目的就是让开发者可以自定义 HTML 元素，以进行更好的组件化开发。

在 Web Components 前，我们开发组件通常要用到一些采用 JavaScript API 来实现的 solutions。但自从 Custom Elements 起步后，我们就可以通过类似下面的代码定义一个新的 HTML 元素：

// www.javascriptcn.com code example
class HelloWorld extends HTMLElement {
  // Lifecycle method that's called when the element is first attached to the DOM
  connectedCallback() {
    this.innerHTML = `
      <h1>Hello World!</h1>
    `;
  }
}
customElements.define('hello-world', HelloWorld);

这里的 HelloWorld 就是开发者自定义的 HTML 元素，她继承了 HTMLElement，所以其本质上就是一个 HTML 元素，我们通过 customElements.define() 将其注册为自定义元素，便可以在相应的 HTML 里使用 <hello-world>。

可以看出，Web Components 和自定义元素是有一定区别的：

Web Components 是包含多个规范的技术，包括自定义元素、影子 DOM、HTML 模板和 HTML Import，而自定义元素只是 Web Components 中的一个规范。
Web Components 是一个更全面的解决方案，能更好地复用代码和提高开发效率。而自定义元素主要是通过扩展 HTML 元素来提高可维护性和可复用性。

所以，当我们只想用一个简单易懂的方法来扩展一个 HTML 元素的时候，可以使用自定义元素。而当我们需要更深入的组件化开发时，需要考虑使用 Web Components。

实战

接下来是一个实战例子，展示自定义元素的基本用法：

// www.javascriptcn.com code example
<hello-world></hello-world>

<script>
  class HelloWorld extends HTMLElement {
    constructor() {
      super();
      this.textContent = 'Hello World!';
    }
  }
  customElements.define('hello-world', HelloWorld);
</script>

代码很短，我们只需要定义 HelloWorld 类去继承 HTMLElement，然后设置元素的文本内容即可。

综上所述，若要提高跨应用程序的组件复用，Web Components 是最佳选择。而自定义元素则更适合扩展现有的 HTML 元素以提高可维护性和可复用性。

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

Web Components vs 自定义元素

Web Components

自定义元素

实战

接着读