Custom Elements 造出独一无二的 web 组件

如果您是一个前端开发者，那么您一定知道网页组件的重要性。Web 组件是一种将 UI 模块化的方式，加速开发进程，提高组件的可复用性和可维护性。Custom Elements 是 HTML 标准规范的一个部分，它使得开发者可以根据自己的需要，创建出独一无二的 web 组件。

什么是 Custom Elements？

Custom Elements 的终极目标是让开发者可以使用自定义标签，同时让它们行为良好、轻松掌控。通过 Custom Elements，开发者可以创建一个以用户自定义标记的形式定义的元素，并为它们添加行为。这样，可以组合成复杂的应用程序，从而提高应用的开发效率和可维护性。

如何使用 Custom Elements

Custom Elements 提供了两个主要的功能，分别是定义新元素和扩展现有元素。

定义新元素

要定义自己的元素，首先需要从 HTMLElement 类继承，并使用 CustomElementRegistry 定义自己的元素。我们来看一个简单的例子：

<my-element></my-element>

class MyElement extends HTMLElement {
  constructor() {
    super();
    console.log('My Element is created!');
  }
}

customElements.define('my-element', MyElement);

这个例子演示了如何创建一个简单的自定义元素，并在控制台中打印一个消息。

扩展现有元素

如果要扩展现有的元素，需要使用已有元素的对象。我们来看一个例子：

<p is="fancy-text"></p>

class FancyText extends HTMLParagraphElement {
  constructor() {
    super();
    this.style.fontWeight = 'bold';
  }
}

customElements.define('p', FancyText, { extends: 'p' });

这个例子演示了如何扩展<p>标签，并将其显示为粗体。

Custom Elements 和 Shadow DOM 的结合

Shadow DOM 是 HTML 的一个标准规范，它允许开发者将组件渲染在一个隔离的 DOM 树中，这样可以避免全局 scope 中的样式和 JavaScript 影响到应用程序的其他部分。在 Custom Elements 中结合使用 Shadow DOM，你可以编写更加灵活的组件。我们来看一个简单的例子：

-- -------------------- ---- -------
------------
  ------------
    -------
      ----- -
        -------- ------
        ------- --- ----- ------
        -------- -----
      -
    --------
    -------- ----------
-------------

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'open'});
  }
}

customElements.define('my-element', MyElement);

这个例子演示了如何创建一个包含 Shadow DOM 的自定义元素。通过 Shadow DOM，开发者可以在元素的内部定义样式和 HTML，同时又不会影响到全局。

总结

Custom Elements 是开发者创建自己独一无二的 Web 组件的标准规范。通过 Custom Elements，开发者可以自定义标记，并添加行为。自定义组件的模块化和可维护性，大大提高了应用程序的开发速度和可维护性。

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