Custom Elements 的基础知识和构建方法

什么是 Custom Elements

Custom Elements 是 Web Components 的一部分，它是一种自定义 HTML 元素的方法。通过 Custom Elements，开发者可以创建自己的 HTML 元素，这些元素可以像原生 HTML 元素一样使用，并且可以被其他开发者引用和重用。

Custom Elements 最重要的特点是它可以封装复杂的功能和交互，让开发者可以更加轻松地使用和维护自己的代码。

如何创建 Custom Elements

创建 Custom Elements 需要遵循一些规范和约定，下面是一个简单的例子：

<my-element></my-element>

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

      // 添加 Shadow DOM
      const shadow = this.attachShadow({ mode: 'open' });

      // 创建 DOM 元素
      const div = document.createElement('div');
      div.textContent = 'Hello, World!';

      // 添加 DOM 元素到 Shadow DOM 中
      shadow.appendChild(div);
    }
  }

  customElements.define('my-element', MyElement);
</script>

上面的代码中，我们创建了一个叫做 my-element 的 Custom Element。我们先定义了一个 MyElement 类，这个类继承自 HTMLElement，它是所有 HTML 元素的基类。

在 MyElement 类的构造函数中，我们创建了一个 Shadow DOM，并添加了一个简单的 DOM 元素到 Shadow DOM 中。最后，我们使用 customElements.define 方法将 my-element 注册为 Custom Element。

Custom Elements 的生命周期

Custom Elements 有自己的生命周期，包括 connectedCallback、disconnectedCallback、adoptedCallback、attributeChangedCallback 等方法。

<my-element></my-element>

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

      const shadow = this.attachShadow({ mode: 'open' });
      const div = document.createElement('div');
      div.textContent = 'Hello, World!';
      shadow.appendChild(div);
    }

    connectedCallback() {
      console.log('connected');
    }

    disconnectedCallback() {
      console.log('disconnected');
    }

    adoptedCallback() {
      console.log('adopted');
    }

    attributeChangedCallback(name, oldValue, newValue) {
      console.log(`attribute ${name} changed from ${oldValue} to ${newValue}`);
    }
  }

  customElements.define('my-element', MyElement);
</script>

上面的代码中，我们为 MyElement 类定义了 connectedCallback、disconnectedCallback、adoptedCallback、attributeChangedCallback 四个方法。这些方法会在 Custom Element 的生命周期中被调用。

Custom Elements 的样式

Custom Elements 的样式可以使用 Shadow DOM 来封装，这样可以避免样式的污染和冲突。

<my-element></my-element>

<style>
  my-element {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #f00;
  }

  my-element div {
    color: #fff;
  }
</style>

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

      const shadow = this.attachShadow({ mode: 'open' });
      const div = document.createElement('div');
      div.textContent = 'Hello, World!';
      shadow.appendChild(div);
    }

    connectedCallback() {
      this.shadowRoot.innerHTML = `
        <style>
          :host {
            display: block;
            width: 100%;
            height: 100%;
            background-color: #f00;
          }

          div {
            color: #fff;
          }
        </style>
        <div>Hello, World!</div>
      `;
    }
  }

  customElements.define('my-element', MyElement);
</script>

上面的代码中，我们为 MyElement 类添加了样式。我们可以看到，我们使用了 :host 选择器来选择 Custom Element 自身，这样可以确保样式只会应用到当前的 Custom Element 中。

总结

Custom Elements 是 Web Components 的重要特性之一，它可以让开发者自定义 HTML 元素，并且可以封装复杂的功能和交互。在创建 Custom Elements 时，我们需要遵循一些规范和约定，并且需要了解 Custom Elements 的生命周期和样式的使用方法。通过 Custom Elements，我们可以让我们的代码更加简洁、易于维护和重用。

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