Web components

Web components是一组Web平台API和用于创建和使用可重复使用的自定义HTML元素的规范，旨在帮助我们封装和打包其UI元素和功能，从而更容易构建模块化、可维护和可重用的Web应用程序组件。

开始使用Web components

• 自定义元素： 允许我们定义具有自定义行为的自己的HTML元素。这些元素可以封装特定组件所需的标记和JavaScript逻辑。
• Shadow DOM： 为Web components的样式和标记提供封装。它允许创建具有自己的作用域CSS的独立DOM子树，防止样式泄漏和干扰页面的其余部分。
• HTML模板： 是一种定义可在需要时在DOM中实例化的可重复使用标记块的方法。它们通常在自定义元素中使用，用于定义组件的结构。

自定义元素：

自定义元素定义： 我们可以通过创建一个继承HTMLElement基类或其派生类的类来定义自己的自定义元素。该类代表自定义元素并定义其行为和属性。

class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    // 在这里初始化我们的自定义元素
  }
}

自定义元素注册： 在定义自定义元素类之后，需要使用customElements.define方法在浏览器中注册它。这将自定义元素的标签名称与其JavaScript类关联起来。

customElements.define('my-custom-element', MyCustomElement);

现在，我们可以在HTML中使用<my-custom-element></my-custom-element>，它将与我们的MyCustomElement类关联起来。

生命周期回调： 自定义元素提供生命周期回调，允许我们在元素生命周期的各个阶段定义行为。一些常见的生命周期回调包括：

• constructor()：在创建自定义元素实例时调用。
• connectedCallback()：在自定义元素插入DOM时调用。
• disconnectedCallback()：在自定义元素从DOM中移除时调用。
• attributeChangedCallback()：在元素的指定属性发生变化时触发。

我们可以使用这些回调来设置初始状态、附加事件监听器以及在必要时执行清理。

Shadow DOM：

Shadow DOM（影子DOM） 是Web平台的一个功能，允许对Web components的HTML、CSS和JavaScript的一部分进行封装。它使我们能够在HTML文档内创建隔离且独立的DOM树。Shadow DOM对于构建模块化和可重用的Web components非常有用，确保其内部结构和样式不会干扰页面的其余部分。

Shadow DOM的关键特征包括：

• 封装： Shadow DOM封装了Web components的标记、样式和行为，防止它们影响或受到全局页面的DOM和CSS的影响。这种隔离有助于避免命名冲突和意外的样式交互。
• 作用域样式： 在Shadow DOM中定义的样式仅作用于该Shadow DOM子树内的元素。它们不会泄漏到文档的其他部分，也不会受全局页面样式的影响。这种作用域样式有助于维护组件的完整性。
• 组合： Shadow DOM可用于从更小、封装的部分组合复杂的Web components。这些部分可以在不同的组件和项目中重复使用，促进了模块化和可维护性。
• JavaScript封装： 除了封装标记和样式，Shadow DOM还封装了JavaScript。在Shadow DOM内运行的JavaScript代码与外部代码隔离，防止潜在的冲突，确保组件的完整性。

以下是在自定义元素中创建Shadow DOM的示例：

class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'closed' });
    shadow.innerHTML = `
      <style>
        /* Shadow DOM的作用域样式 */
        :host {
          color: blue;
        }
      </style>
      <p>这个内容在Shadow DOM内。</p>
    `;
  }
}

customElements.define('my-custom-element', MyCustomElement);

在上面的示例中，使用了attachShadow方法和mode: 'closed'，这会将Shadow DOM从MyCustomElement之外的JavaScript中隐藏。Shadow DOM仍然封装了标记和样式，但无法从外部JavaScript中访问或操作。

HTML模板和插槽：

• HTML模板 利用<template>元素定义了可重复使用的标记结构，最初被隐藏和不活动，等待在DOM中进行动态插入，以促进可重用性。
• 插槽（Slots）： 插槽允许将内容从父文档投影到自定义元素内的命名插槽中。在父文档中使用自定义元素时，可以为这些插槽提供内容。

要使用HTML模板和插槽创建具有自定义元素的Web components，我们可以使用<template>元素和<slot>元素。以下是如何修改我们的MyCustomElement类以使用模板和插槽的示例：

class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'closed' });

    // 创建一个模板元素
    const template = document.createElement('template');
    template.innerHTML = `
      <style>
        /* Shadow DOM的作用

域样式 */
        :host {
          color: blue;
        }
      </style>
      <p>这个内容在Shadow DOM内。</p>
      <slot></slot> <!-- 为内容定义一个插槽 -->
    `;


    const clone = document.importNode(template.content, true);
    shadow.appendChild(clone);
  }
}

customElements.define('my-custom-element', MyCustomElement);

通过此代码，我们创建了一个包含组件结构的<template>元素，其中包括用于内容的<slot>元素。在HTML中使用自定义元素时，<my-custom-element>标签内的内容将替换Shadow DOM中的<slot>元素的内容。

以下是如何在HTML中使用我们的自定义元素的示例：

<my-custom-element>
  <p>通过插槽插入的内容。</p>
</my-custom-element>

在这个例子中，<my-custom-element>标签内的内容将替换Shadow DOM中的<slot>元素的内容。

Web components演示：

我们可以在这里找到一个Web components的实际示例。

可能你会问，为什么大家都不经常使用Web components呢？

• 复杂性： 与使用流行的前端框架相比，Web components可能更冗长，需要对Web平台有更深入的了解。一些我们认为Web components的设置和使用更为复杂，尤其是在基本功能如数据绑定和状态管理不容易获得的情况下。
• 有限的工具和生态系统： 流行的前端框架如React和Vue具有丰富的生态系统，拥有大量的库、工具和资源。作为较低级别技术的Web components没有如此成熟或广泛的生态系统，这可能使开发变得更具挑战性。
• 对未知技术的不愿采用： 从React、Angular、Vue或Svelte转向Web components可能会具有挑战性，因为缺乏广泛的案例研究或使用Web components的知名产品。尽管越来越多的公司现在正在采用Web components来满足其需求，但仍然需要高质量的案例研究和信息性博文来促进这种转变。 我正在参与2024腾讯技术创作特训营第五期有奖征文，快来和我瓜分大奖！