自定义元素✅

web components 了解多少?

答案

Web Components 是一套原生前端技术标准，允许开发者创建可复用、封装良好的自定义元素。其核心包括三大要素：

• Custom Elements（自定义元素）
  通过 JavaScript API 定义新标签及其行为。例如：

  class MyElement extends HTMLElement {
    connectedCallback () { /* ... */ }
  }
  window.customElements.define('my-element', MyElement)

  支持生命周期钩子（如 connectedCallback、disconnectedCallback、adoptedCallback、attributeChangedCallback），便于管理元素挂载、卸载、属性变化等。

• Shadow DOM（影子 DOM）
  为元素创建独立的 DOM 子树，实现样式和结构的隔离，避免外部样式污染。通过 this.attachShadow({mode: 'open'}) 启用。

  提示

  使用 Shadow DOM 可实现样式隔离，适合开发 UI 组件库。

• HTML Templates & Slot
  <template> 标签可声明可复用的 DOM 结构，<slot> 用于分发内容。简化组件开发，提升灵活性。

• 属性传递：通过设置属性或 property 传递数据，复杂数据可用 JSON 字符串。

• 事件通信：自定义事件（如 this.dispatchEvent(new CustomEvent('change', {...}))）实现父子通信。

• 双向绑定：可监听 input 事件并同步属性，实现数据回流。

• 直接在自定义标签或 Shadow DOM 内部添加 <style>。

• 也可通过 JS 动态插入 <style> 或 <link>，支持外部样式文件。

const style = document.createElement('style')
style.textContent = '.header{color:red}'
shadow.appendChild(style)

常见误区

• 并非所有场景都需用 Shadow DOM，简单组件可只用 Custom Elements。
• 兼容性：IE 不支持，部分高级特性需 polyfill。
• 复杂数据建议用 property 传递，属性变化监听有限。

延伸阅读

• MDN: Web Components — 官方文档
• Web Components 标准 — WHATWG 标准
• 深入理解 Shadow DOM — 样式隔离原理与实践
• Web Components 实战视频 — B 站教程

备注

Web Components 适合开发可复用、跨框架的 UI 组件，已被主流框架和浏览器广泛支持。