Web Components 是什么

Web Components 是一套不同的 web 标准，它们允许开发者创建可重用的自定义元素（通过封装 JavaScript 类来定义），这些元素封装了 HTML、CSS 和 JavaScript。

Web Components 主要包括以下几个部分：

Custom Elements：允许开发者定义自己的元素，扩展 HTML。
Shadow DOM：提供了一种将一个 Web Component 的内部实现细节隐藏起来的方法，从而创建一个封装的影子树（shadow tree）。
HTML Templates：提供了一个客户端的模板系统，允许开发者定义客户端的 DOM 树，这些树在页面加载时是隐藏的，直到被 JavaScript 激活。
HTML Imports：一种浏览器技术，允许开发者将 HTML 文档导入到其他 HTML 文档中，类似于 CSS 和 JavaScript 的 @import。

Custom Elements代码示例

javascript 复制代码

// 定义一个新的元素 'my-element'
class MyElement extends HTMLElement {
  constructor() {
    super(); // 调用 HTMLElement 的构造函数
    this.attachShadow({ mode: 'open' }); // 创建一个 Shadow DOM
    this.shadowRoot.innerHTML = `<style>p { color: red; }</style><p> Hello, World! </p>`;
  }
  
  // 定义一个方法，可以在元素上调用
  sayHello() {
    console.log('Hello from MyElement!');
  }
}

// 定义元素
customElements.define('my-element', MyElement);

// 使用新的元素
const myEl = document.createElement('my-element');
document.body.appendChild(myEl);
myEl.sayHello(); // 输出：Hello from MyElement!

Shadow DOM 代码示例

允许将一个 Web Component 的内部实现细节隐藏起来

javascript 复制代码

class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>:host { color: red; }</style>
      <slot>Default content</slot>
    `;
  }
}

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

const myComponent = document.createElement('my-component');
myComponent.shadowRoot.querySelector('slot').addEventListener('click', () => {
  console.log('Slot clicked');
});

document.body.appendChild(myComponent);
//my-component 是一个自定义元素，它使用了 Shadow DOM 来封装样式和内容。<slot> 元素用于插入外部内容。

HTML Templates 代码示例

HTML Templates 提供了一个客户端的模板系统：

javascript 复制代码

<template id="my-template">
  <style>p { color: green; }</style>
  <p>This is a template.</p>
</template>

<script>
  class MyTemplateElement extends HTMLElement {
    constructor() {
      super();
      const template = document.querySelector('#my-template');
      const instance = template.content.cloneNode(true);
      this.appendChild(instance);
    }
  }

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

<my-template-element></my-template-element>
//<template> 标签定义了一个模板，MyTemplateElement 类使用这个模板来创建一个自定义元素的实例。

this.attachShadow是什么

this.attachShadow 是一个方法，它属于 Web Components 规范的一部分，用于在自定义元素（Custom Elements）上创建一个 Shadow DOM。Shadow DOM 是一种浏览器技术，它允许开发者将一个 Web Component 的内部实现细节隐藏起来，创建一个封装的影子树（shadow tree），这样可以避免样式和脚本冲突，实现更好的封装和组件化。

基本用法

当你在自定义元素的类中调用 this.attachShadow 方法时，你需要传递一个对象作为参数，该对象包含一个 mode 属性，它定义了 Shadow DOM 的模式：

open：默认值，允许 JavaScript 访问 Shadow DOM 树。
closed：Shadow DOM 树对 JavaScript 来说是不可见的，无法通过 JavaScript 访问。

示例代码

下面是一个使用 this.attachShadow 的示例：

class MyElement extends HTMLElement {
  constructor() {
    super(); // 调用父类的构造函数
    this.attachShadow({ mode: 'open' }); // 创建一个可访问的 Shadow DOM
    this.shadowRoot.innerHTML = `<style>p { color: red; }</style><p> Hello, World! </p>`;
  }
}

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

const myEl = document.createElement('my-element');
document.body.appendChild(myEl);

MyElement 是一个自定义元素，它使用 this.attachShadow 方法创建了一个 Shadow DOM。然后，它将一些 HTML 和 CSS 插入到 Shadow DOM 中。由于使用了 { mode: 'open' }，这个 Shadow DOM 是可访问的，可以通过 this.shadowRoot 属性来访问。