WebComponents自定义元素入门教程

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《Web Components实现自定义元素教程》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

使用Web Components可创建独立可复用的自定义元素，1. 通过继承HTMLElement并用customElements.define()注册组件；2. 利用影子DOM实现样式和结构隔离；3. 结合template标签提升代码组织性与性能；4. 使用slot插入外部内容以增强灵活性；5. 通过observedAttributes和attributeChangedCallback响应属性变化。该技术不依赖框架，适合构建跨项目UI库，需注意浏览器兼容性。

使用 Web Components 构建可复用的自定义 HTML 元素，核心在于利用浏览器原生支持的几项技术：自定义元素（Custom Elements）、影子 DOM（Shadow DOM）和 HTML 模板（template）。通过它们可以封装样式、结构和行为，实现真正独立、可复用的组件。

定义自定义元素

要创建一个可复用的自定义元素，首先需要继承 HTMLElement 并通过 customElements.define() 注册。元素名称必须包含连字符（-），以避免与原生 HTML 标签冲突。

class MyButton extends HTMLElement {
  constructor() {
    super();
    this.textContent = this.getAttribute('label') || '点击我';
    this.style.padding = '10px 20px';
    this.style.backgroundColor = '#007bff';
    this.style.color = 'white';
    this.style.borderRadius = '4px';
    this.style.display = 'inline-block';
    this.style.cursor = 'pointer';
  }

  connectedCallback() {
    this.addEventListener('click', () => {
      alert('按钮被点击！');
    });
  }
}

customElements.define('my-button', MyButton);

之后就可以在 HTML 中使用：

使用影子 DOM 封装样式和结构

为了让组件样式不被外部影响，也防止组件内部样式泄漏到全局，应使用影子 DOM。在构造函数中调用 this.attachShadow({ mode: 'open' }) 创建影子根。

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

    const wrapper = document.createElement('div');
    const title = document.createElement('h3');
    const content = document.createElement('p');

    title.textContent = this.getAttribute('title') || '默认标题';
    content.textContent = this.getAttribute('content') || '这是内容';

    const style = document.createElement('style');
    style.textContent = `
      div {
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 16px;
        background: #f9f9f9;
        font-family: sans-serif;
      }
      h3 { color: #333; margin-top: 0; }
      p { color: #555; }
    `;

    wrapper.appendChild(title);
    wrapper.appendChild(content);
    shadow.appendChild(style);
    shadow.appendChild(wrapper);
  }
}

customElements.define('my-card', MyCard);

现在这个卡片组件的样式完全隔离，不会受页面其他 CSS 影响。

结合 template 提高可维护性

对于结构较复杂的组件，推荐使用