javascript怎样创建可重用组件_Web Components是什么【教程】

Web Components 是浏览器原生标准，含 Custom Elements（需含短横线、继承 HTMLElement、用 define 注册）、Shadow DOM（open/closed 模式、slot 分发、样式隔离）和 template 克隆机制，但无内置响应式，通信依赖属性/事件。

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 里容易重复渲染；用 标签预存结构，再克隆插入，才是稳定做法。


燕雀Logo
为用户提供LOGO免费设计在线生成服务
下载

立即学习“Java免费学习笔记（深入）”；

• 模板必须放在 外（如 或页面顶部），否则解析时会被当作普通文本丢弃
• 克隆后要调用 content.cloneNode(true)，否则后续修改会影响原始模板
• 若模板含 或动态绑定（如 {{value}}），Web Components 本身不处理——得自己实现或引入轻量模板引擎
• 事件委托要小心：shadowRoot 是事件边界，默认 click 不会冒泡到 light DOM，需手动 composed: true 触发

真正难的不是语法，是状态管理与跨组件通信：Web Components 没有内置响应式系统，父子传参靠属性/事件，兄弟通信得靠自定义事件 + dispatchEvent 向上抛，再由共同父级转发——这点很容易被忽略，结果写出来一堆紧耦合的“伪组件”。