JavaScript创建可重用组件方法详解

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《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 里容易重复渲染；用