前端Wiki/HTML5/深入/现代 API 与组件

Web Components 入门

Web Components 是浏览器原生的组件化方案，三大件协同：自定义元素（customElements.define 注册新标签）、Shadow DOM（组件内部结构与样式与外界隔离）、template/slot（内容模板与插槽）。框架出现前它是"组件化"的标准答案，如今作为理解框架组件机制的底座同样值得学。

最小流程分四步：定义一个继承 HTMLElement 的类；在 connectedCallback（元素插入页面时触发）里搭建内部结构；用 attachShadow({ mode: 'open' }) 挂载影子树，Shadow DOM 里的 CSS 不会外泄也不会被外部样式污染；最后 customElements.define('标签名', 类) 注册——标签名必须包含短横线（如 my-badge），这是与原生标签的区分规则。

常用生命周期还有 attributeChangedCallback（属性变化时触发，需配合 observedAttributes 声明监听哪些属性）。定义好的标签像普通标签一样使用，跨项目复制即可复用。

本节要点三件套：自定义元素 + Shadow DOM（样式隔离）+ template/slot；继承 HTMLElement、connectedCallback 里初始化、define 注册时标签名必须带短横线。

HTML

<my-badge text="新功能"></my-badge>
<script>
  class MyBadge extends HTMLElement {
    connectedCallback() {              // 元素插入页面时执行
      var shadow = this.attachShadow({ mode: 'open' }); // 挂载影子 DOM
      var text = this.getAttribute('text') || '徽章';
      // 影子树内的样式完全隔离，不影响外部、也不受外部影响
      shadow.innerHTML =
        '<style>span{background:#e5534b;color:#fff;' +
        'padding:2px 8px;border-radius:4px;font-size:12px}</style>' +
        '<span>' + text + '</span>';
    }
  }
  // 注册自定义标签：名字必须含短横线
  customElements.define('my-badge', MyBadge);
</script>

🔗 相关词条Web Components 生命周期 CSS 浏览器 DOM 标签元素继承

📚 推荐阅读

ECharts 图表教程万象云档

PWA 应用实战万象云档

移动前端开发经验指南万象云档

Socket.IO v4 中文文档万象云档

Electron 27 中文文档万象云档

来自万象云档的免费在线书籍，点击封面直接阅读