Web Component

Web Components 是一组标准技术，用于创建可重用的自定义 HTML 元素，它们可以封装复杂的功能，并且可以在不同的页面和应用程序中使用。

Web Components 包含三个主要技术：Custom Elements、Shadow DOM 和 HTML Templates。

Custom Elements

Custom Elements 允许开发者创建自定义的 HTML 元素，并在页面中使用它们。自定义元素可以封装任意的行为和功能，并且可以通过 JavaScript 进行操作和控制。

例如，以下代码定义了一个自定义元素 my-button，它继承自 HTMLButtonElement，当被单击时，会弹出一个对话框：

class MyButton extends HTMLButtonElement {
  constructor() {
    super();
    this.addEventListener('click', () => alert('Button clicked!'));
  }
}
customElements.define('my-button', MyButton, { extends: 'button' });

以上代码使用 ES6 的 class 语法定义了一个自定义元素 MyButton，它继承自 HTMLButtonElement。在构造函数中，使用 addEventListener() 方法监听 click 事件，并在事件处理函数中弹出一个对话框。最后，使用 customElements.define() 方法将自定义元素注册到文档中，名称为 my-button，继承自 button 元素。

Shadow DOM

Shadow DOM 允许开发者创建封装的 DOM 树，用于隔离自定义元素的样式和行为，以便在页面中使用它们时不会受到外部样式和脚本的影响。

例如，以下代码定义了一个自定义元素 my-progress，它使用 Shadow DOM 封装了一个进度条：

class MyProgress extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    const template = document.createElement('template');
    template.innerHTML = `
      <style>
        :host {
          display: block;
          width: 100%;
          height: 12px;
          border-radius: 6px;
          background-color: #eee;
        }
        #inner {
          display: block;
          width: ${this.getAttribute('value')}%;
          height: 100%;
          border-radius: 6px;
          background-color: #007aff;
        }
      </style>
      <div id="inner"></div>
    `;
    shadow.appendChild(template.content.cloneNode(true));
  }
  static get observedAttributes() {
    return ['value'];
  }
  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'value') {
      this.shadowRoot.querySelector('#inner').style.width = newValue + '%';
    }
  }
}
customElements.define('my-progress', MyProgress);

以上代码使用 ES6 的 class 语法定义了一个自定义元素 MyProgress，它继承自 HTMLElement。在构造函数中，使用 attachShadow() 方法创建一个 Shadow DOM，模式为 'open'，表示可以从外部访问 Shadow DOM。然后，创建一个 HTML 模板，包含进度条的样式和 DOM 结构，并将其添加到 Shadow DOM 中。最后，使用 customElements.define() 方法将自定义元素注册到文档中，名称为 my-progress。

HTML Templates

HTML Templates 允许开发者创建可重用的 HTML 模板，它们可以包含任意的 HTML、CSS 和 JavaScript 代码，并且可以在需要时进行实例化和使用。

例如，以下代码定义了一个 HTML 模板 my-template，它包含一个按钮和一个文本框：

const template = document.createElement('template');
template.innerHTML = `
  <style>
    button {
      background-color: #007aff;
      color: #fff;
      border: none;
      border-radius: 4px;
      padding: 8px 16px;
      font-size: 16px;
      cursor: pointer;
    }
    input {
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 8px;
      font-size: 16px;
    }
  </style>
  <button>Click me</button>
  <input type="text" placeholder="Enter your name">
`;
document.body.appendChild(template.content.cloneNode(true));

以上代码创建了一个 HTML 模板 template，包含一个按钮和一个文本框。在创建模板时，使用了 template 元素的 innerHTML 属性设置模板内容。然后，使用 document.body.appendChild() 方法将模板添加到文档中。

需要注意的是，HTML Templates 只定义了一个 HTML 模板，并不会自动实例化。开发者需要使用 JavaScript 代码将模板实例化，并将其添加到文档中。

Web Component

# Web Component

Web Component