HTML5 Web Components如何自定义和扩展Web元素？

// 定义一个名为my-element的新HTML元素
class MyElement extends HTMLElement {
  // 构造函数中创建shadow DOM
  constructor() {
    super();
    // 附加shadow root并设置样式
    const shadow = this.attachShadow({mode: 'open'});
    const style = document.createElement('style');
    style.textContent = `
      :host {
        display: block;
        border: 1px solid blue;
        padding: 10px;
      }
    `;
    shadow.appendChild(style);
    shadow.textContent = 'Hello, Custom Element!';
  }
}
 
// 定义元素的适用场景
customElements.define('my-element', MyElement);

这段代码定义了一个简单的自定义HTML元素<my-element>，它创建了一个带有蓝色边框的块级元素，并在其内部显示了一段文本。通过使用customElements.define方法，我们可以在整个文档中使用这个自定义元素。这是Web Components提供的一种方式，可以用来创建可重用的自定义组件。