细说 Web Components：创建、使用与优化-JavaScript中文网-JavaScript教程资源分享门户

前言

Web Components 是一项从2011年开始的 Web 标准化技术，可以将页面上的 UI 组件打包成可复用的元素。这个概念一开始被 Google 推出，并与 Polymer 一起发布。随着 Custom Elements、Shadow DOM、HTML Templates 的标准化，Web Components 成为一项越来越受欢迎的技术。

本文将介绍 Web Components 的创建、使用、优化等方面，并提供示例代码。

创建

Web Components 由三个主要的技术协议组成：

Custom Elements：创建新的 HTML 标签；
Shadow DOM：封装 Web Components 的样式和行为；
HTML Templates：定义 Web Components 的模板。

Custom Elements

Custom Elements 规范定义了如何创建新的 HTML 标签。例如：

class MyComponent extends HTMLElement {
  constructor() {
    super();
  }
}

customElements.define('my-component', MyComponent);

在这段代码中，我们定义了一个名为 MyComponent 的类，继承自 HTMLElement。你可以像定义普通类一样来定义你的 Web Component，然后将它注册到自定义元素的生命周期中。

可以在自定义元素的构造函数中设置 Shadow DOM，如下所示：

// javascriptcn.com 代码示例
class MyComponent extends HTMLElement {
  constructor() {
    super();
  
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
      <style>
        /* 样式将只应用于 shadow DOM 内部 */
      </style>
      
      <!-- shadow DOM 内部的 HTML 元素 -->
    `;
  }
}

customElements.define('my-component', MyComponent);

Shadow DOM

Shadow DOM 可以将 Web Components 的样式和行为封装在一个独立的、隔离的 DOM 中。Shadow DOM 的一些常见用法包括：

封装样式

使用 Shadow DOM 封装样式，可以避免 Web Components 的样式被全局样式影响，以达到组件化的效果，例如：

// javascriptcn.com 代码示例
<template id="my-component">
  <style>
    h1 { color: red }
  </style>
  
  <h1>Hello, world!</h1>
</template>

<script>
  class MyComponent extends HTMLElement {
    constructor() {
      super();
  
      const template = document.querySelector('#my-component').content;
      const shadow = this.attachShadow({ mode: 'open' });
      
      shadow.appendChild(template.cloneNode(true));
    }
  }

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

在这个例子中，我们使用了一个指定了 ID 为 my-component 的模板，定义了样式和 HTML 结构，然后在 Web Component 构造函数中使用 attachShadow 创建了一个新的 shadow DOM 并将模板中的所有内容克隆到其中。

封装行为

使用 Shadow DOM 封装行为，还可以使每一个 Web Component 都有自己的隔离空间，避免有多个 Web Component 彼此之间的干扰。

// javascriptcn.com 代码示例
class Accordion extends HTMLElement {
  constructor() {
    super();
  
    const shadow = this.attachShadow({ mode: 'open' });
    
    shadow.innerHTML = `
      <style>
        /* 样式仅适用于 shadow DOM 内部 */
        .accordion { border: 1px solid black; }
        .panel { display: none; }
        .active { display: block }
      </style>
      
      <div class="accordion">
        <slot name="title"></slot>
        <div class="panel">
          <slot name="content"></slot>
        </div>
      </div>
    `;
    
    this.shadowRoot.querySelector('.accordion').addEventListener('click', () => {
      this.togglePanel();
    });
  }
  
  togglePanel() {
    const panel = this.shadowRoot.querySelector('.panel');
    panel.classList.toggle('active');
  }
}

customElements.define('x-accordion', Accordion);

在这个例子中，我们创建了一个叫做 Accordion 的 Web Component，它包含一个 slot，用于在组件使用时提供标题和内容。在组件构造函数中，我们使用 attachShadow 创建了一个新的 shadow DOM，并将 CSS 样式定义在其中。然后我们开始监听 dom 上面 .accordion 的点击，从而调用 togglePanel 来切换 display 的值来实现折叠与展开的效果。

HTML Templates

HTML Templates 可以将 Web Component 的结构和内容定义在一个 HTML 模板中，这个模板不会自动渲染为 DOM 元素，而是可以通过 JavaScript 调用来创建。

// javascriptcn.com 代码示例
<template id="my-component">
  <style>
    /* 样式 */
  </style>
  
  <!-- 结构 -->
</template>

<script>
  class MyComponent extends HTMLElement {
    constructor() {
      super();
  
      const template = document.querySelector('#my-component').content.cloneNode(true);
      const shadow = this.attachShadow({ mode: 'open' });
      shadow.append(template);
    }
  }

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

在这个例子中，我们很容易地将一个 HTML 模板使用 content 属性调用并克隆到 shadow DOM 中。

使用

有关 Web Components 的使用方式有很多，下面是其中的一些需要注意的方面：

在 HTML 文件中使用

最简单的方法是在 HTML 文件中使用 Web Components，我们只需要通过定义好的标签名称来引用 Web Components，例如：

<my-component></my-component>

在这里，my-component 将会自动转换为 MyComponent 类创建的 Web Component 标签，因此在页面上呈现出来的效果就是 Web Component 所定义的内容。

在 React 中使用

在 React 中使用 Web Components，只需要将标签名称直接传递给 React 组件就可以完成使用，例如：

function App() {
  return (
    <div>
      <my-component></my-component>
    </div>
  );
}

在这里，my-component 将会自动转换为 MyComponent 类创建的 Web Component 标签。

在 Vue 中使用

在 Vue 中使用 Web Components，只需要将标签名称直接传递给 Vue 组件就可以完成使用，例如：

// javascriptcn.com 代码示例
<template>
  <div>
    <my-component></my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.js';

export default {
  components: {
    'my-component': MyComponent
  }
}
</script>

在这里，my-component 将会自动转换为 MyComponent 类创建的 Web Component 标签。

优化

Web Components 可以被用于各种不同的应用场景，但同样地，也有很多需要注意的方面：

提高性能

Web Components 有很多可以提高性能的技巧，一些最常用的技巧包括：

懒加载组件以提高页面加载速度；
使用 immutable data 来避免不必要的重渲染。

兼容性

Web Components 并不是所有浏览器都支持的新技术，尤其是在较老的浏览器上可能会遇到一些问题。在这种情况下，可以使用 polyfill 或使用框架来提供对 Web Components 的支持。

浏览器

不同的浏览器对 Web Components 的支持程度也有所不同。在开发过程中可以使用 Can I Use 来查看浏览器的支持情况，并根据需要做出相应的调整。

总结

Web Components 是一项非常强大的技术，可以将页面上的 UI 组件打包成可复用的元素，提高代码的可读性和可维护性。本文介绍了 Web Components 的创建、使用与优化，并提供了示例代码。希望能够为读者提供帮助。

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