Custom Elements 和 Shadow DOM：将 Web 组件升级到另一个级别-JavaScript中文网-JavaScript教程资源分享门户

Web 组件是现代 Web 开发中不可或缺的一部分，它们能够提高代码复用性和可维护性，同时也能够提升用户体验。在 Web 组件的发展历程中，Custom Elements 和 Shadow DOM 技术的出现，让 Web 组件的开发和使用更加灵活和高效。

Custom Elements

Custom Elements 是一个 Web 标准，它允许开发者自定义 HTML 元素，并能够在 Web 页面中使用。通过 Custom Elements，我们可以创建自定义的 HTML 标签，这些标签可以像原生 HTML 标签一样使用。Custom Elements 可以接收传递给它们的属性和方法，还可以处理事件。

定义 Custom Element

使用 Custom Elements 定义一个自定义元素非常简单，只需要继承 HTMLElement 类，并在自定义元素的构造函数中实现逻辑即可。

// javascriptcn.com 代码示例
class MyElement extends HTMLElement {
  constructor() {
    super();

    // 在这里添加逻辑
  }
}

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

在上面的示例中，我们定义了一个名为 my-element 的自定义元素，它继承自 HTMLElement 类。在构造函数中，我们可以添加自定义元素的逻辑。

使用 Custom Element

定义了自定义元素之后，我们可以在 HTML 页面中使用它，就像使用原生 HTML 元素一样。

<my-element></my-element>

在上面的示例中，我们使用了名为 my-element 的自定义元素。

传递属性和方法

自定义元素可以接收传递给它们的属性和方法。我们可以使用 attributeChangedCallback 方法来监听属性的变化，使用 connectedCallback 方法来监听自定义元素插入到 DOM 中的事件，使用 disconnectedCallback 方法来监听自定义元素从 DOM 中删除的事件。

// javascriptcn.com 代码示例
class MyElement extends HTMLElement {
  constructor() {
    super();
  }

  static get observedAttributes() {
    return ['name'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'name') {
      this.name = newValue;
    }
  }

  connectedCallback() {
    this.render();
  }

  disconnectedCallback() {
    console.log('My element is disconnected from the DOM.');
  }

  render() {
    this.innerHTML = `Hello, ${this.name}!`;
  }
}

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

在上面的示例中，我们监听了 name 属性的变化，并在 attributeChangedCallback 方法中更新了自定义元素的状态。在 connectedCallback 方法中，我们调用了 render 方法来渲染自定义元素的内容。在 disconnectedCallback 方法中，我们打印了一条日志。

处理事件

自定义元素可以处理事件，我们可以使用 addEventListener 方法来添加事件监听器。

// javascriptcn.com 代码示例
class MyElement extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.addEventListener('click', this.handleClick);
  }

  disconnectedCallback() {
    this.removeEventListener('click', this.handleClick);
  }

  handleClick() {
    console.log('My element is clicked.');
  }
}

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

在上面的示例中，我们使用 addEventListener 方法来添加了一个 click 事件监听器，在 handleClick 方法中打印了一条日志。在 disconnectedCallback 方法中，我们使用 removeEventListener 方法来移除了事件监听器。

Shadow DOM

Shadow DOM 是一个 Web 标准，它允许开发者创建和使用封装的 DOM 树，以及控制 DOM 树的样式和行为。通过 Shadow DOM，我们可以将一组 HTML 元素和样式封装在一起，以便在 Web 页面中使用。

创建 Shadow DOM

使用 Shadow DOM 创建一个封装的 DOM 树非常简单，只需要在自定义元素的构造函数中调用 attachShadow 方法即可。attachShadow 方法接收一个配置对象，其中 mode 属性指定了 Shadow DOM 的模式，可以是 open 或 closed。

// javascriptcn.com 代码示例
class MyElement extends HTMLElement {
  constructor() {
    super();

    const shadowRoot = this.attachShadow({ mode: 'open' });

    // 在 shadowRoot 中添加 HTML 和样式
  }
}

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

在上面的示例中，我们在自定义元素的构造函数中调用了 attachShadow 方法，并指定了 mode 属性为 open。在 shadowRoot 中，我们可以添加 HTML 和样式。

控制样式和行为

使用 Shadow DOM，我们可以控制封装的 DOM 树的样式和行为。我们可以使用 CSS 来控制样式，使用 JavaScript 来控制行为。

// javascriptcn.com 代码示例
class MyElement extends HTMLElement {
  constructor() {
    super();

    const shadowRoot = this.attachShadow({ mode: 'open' });

    const style = document.createElement('style');
    style.textContent = `
      :host {
        display: block;
        border: 1px solid black;
        padding: 10px;
        background-color: #f3f3f3;
      }
    `;
    shadowRoot.appendChild(style);

    const button = document.createElement('button');
    button.textContent = 'Click me';
    button.addEventListener('click', () => {
      alert('You clicked me!');
    });
    shadowRoot.appendChild(button);
  }
}

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

在上面的示例中，我们使用 CSS 控制了自定义元素的样式，使用 JavaScript 添加了一个按钮，并在按钮上添加了一个点击事件监听器。

总结

Custom Elements 和 Shadow DOM 技术让 Web 组件的开发和使用更加灵活和高效。使用 Custom Elements，我们可以创建自定义的 HTML 元素，使用 Shadow DOM，我们可以封装一组 HTML 元素和样式。Custom Elements 和 Shadow DOM 可以联合使用，让我们能够将 Web 组件升级到另一个级别。

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