JavaScript如何创建可重用组件？WebComponents详解

Web Components 作为浏览器原生支持的组件化标准，通过 Custom Elements、Shadow DOM 和 HTML Template 三大核心机制，实现了真正无框架依赖、跨项目可移植的高复用性组件开发；但其“零魔法”特性也意味着开发者需亲手处理生命周期、样式隔离、模板克隆、事件穿透与状态通信等关键细节——稍有不慎就会陷入属性未监听、shadowRoot 访问时机错误、样式泄漏或兄弟组件紧耦合等典型陷阱，因此掌握其设计哲学与实践边界，远比学会语法更重要。

Web Components 不是“教程式框架”，而是浏览器原生支持的一套标准，用它创建的组件天然可重用、无框架依赖、能跨项目移植——但直接手写完整生命周期和样式隔离，容易踩坑。

什么是 Custom Elements？

Custom Elements 是 Web Components 的核心之一，允许你定义自己的 HTML 标签，比如 或 。它必须继承 HTMLElement，且标签名里必须含短横线（-），否则浏览器会拒绝注册。

• 注册必须在 customElements.define() 中完成，且只能注册一次；重复注册会抛错 Failed to execute 'define' on 'CustomElementRegistry': the name "xxx" has already been used
• 构造函数中不能直接操作 this.shadowRoot（因为此时可能还没 attach），应改用 connectedCallback
• 若需响应属性变化，得显式声明 observedAttributes 静态 getter，并实现 attributeChangedCallback

如何用 Shadow DOM 实现样式与结构隔离？

Shadow DOM 是让组件真正“自包含”的关键：它的样式不会泄漏出去，外部样式也进不来。但默认是 open 模式，意味着可通过 el.shadowRoot 访问——如果不想被外部篡改，应设为 closed（不过调试会变困难）。

• 创建 shadow root 时推荐用 this.attachShadow({ mode: 'open' })，避免 IE 兼容问题（IE 完全不支持）
• 是内容分发点，但注意：没有 name 的 只能接收匿名内容；多个具名 需配合
• Shadow DOM 内无法用 :host-context(...) 响应外部 CSS 主题，更可靠的方式是监听 document.documentElement 类名变化或使用 CSS 自定义属性传参

HTML Templates + Custom Elements 怎么组合才不翻车？

把模板逻辑写死在 connectedCallback 里容易重复渲染；用