Web Component 基础

Web Components 是一种新的技术，它使得我们可以创建可复用的自定义元素，这些元素可以在你的应用中使用，而不用担心与其他元素发生冲突。

1.优点

封装性：Web Components 是一种封装性的技术，它可以将 HTML、CSS 和 JavaScript 封装在一起，从而可以创建一个自定义的元素。

封装的设计是是否能用好的关键

2.使用

定义

class MyElement extends HTMLElement {
  private _shadow: ShadowRoot;
  public constructor() {
    super();
    // 创建一个 shadow root
    this._shadow = this.attachShadow({ mode: "closed" });

    this.classList.add("my-element");

    // 创建一个 span
    const span = document.createElement("span");
    span.textContent = "Hello, World!";

    // 将 span 添加到 shadow root 中
    shadow.appendChild(span);
  }
}

注册

1 2	// 定义一个自定义元素 window.customElements.define("my-element", MyElement);

使用

1	<my-element></my-element>

3.分析

3.1 Shadow DOM

ShadowRoot 是 Shadow DOM 的一个实例，它是一个封闭的 DOM 子树。

有两种模式：open 和 closed。

open 模式允许你从外部访问 shadow root，closed 则不允许。

3.2 生命周期

constructor：构造函数
connectedCallback：当元素被插入到 DOM 中
disconnectedCallback：当元素从 DOM 中移除
attributeChangedCallback：当元素的属性发生变化

3.3 slot

slot 是 Web Components 的一个重要特性，它可以让你在自定义元素中插入内容。

1
2
3

<my-element>
  <span>这是一个 span</span>
</my-element>

class MyElement extends HTMLElement {
  private _shadow: ShadowRoot;
  public constructor() {
    super();
    this._shadow = this.attachShadow({ mode: "closed" });
    this._shadow.innerHTML = `
      <div class="my-element">
        <slot></slot>
      </div>
    `;
  }

  public connectedCallback() {
    // 获取 slot 元素
    this._shadow.querySelector("span").addEventListener("click", () => {
      console.log("span clicked");
    });
  }
}