什么是JavaScript中的Web组件标准_自定义元素与Shadow DOM实战【教程】_技术教程

Web Components 是浏览器原生标准，含 Custom Elements 和 Shadow DOM；需用短横线命名、继承 HTMLElement、在 connectedCallback 中渲染和 attachShadow；启用样式隔离须用 attachShadow({mode:'open'})；:host 和 ::slotted 有选择器限制；需注意兼容性与 SSR 问题。

Web Components 不是某个函数或库，而是浏览器原生支持的一套标准组合，核心就两块：Custom Elements 和 Shadow DOM。它们能让你封装可复用、样式隔离、行为独立的 HTML 元素，不依赖框架。

怎么注册一个自定义元素（`customElements.define`）

必须用短横线分隔的名称（如 my-button），不能是单个单词或大驼峰；且必须继承 HTMLElement 或其子类。

注册前不能在 HTML 中提前使用该标签，否则会报 Failed to execute 'define' on 'CustomElementRegistry': the name "xxx" has already been used
构造函数里不能直接操作 this.innerHTML，要等 connectedCallback 触发后再渲染（否则 SSR 或动态插入时可能失效）
若需传参，建议通过 attributeChangedCallback 监听属性变更，而非在 constructor 里读取 this.getAttribute

class MyButton extends HTMLElement {
  static get observedAttributes() {
    return ['label', 'disabled'];
  }
  connectedCallback() {
    this.innerHTML = ``;
  }
  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'disabled') {
      this.querySelector('button').disabled = newValue !== null;
    }
  }
}
customElements.define('my-button', MyButton);

如何启用真正的样式隔离（`attachShadow`）

Shadow DOM 的本质是创建一个与主文档 DOM 树分离的渲染上下文，外部 CSS 默认进不去，内部样式也不会泄漏出去——但前提是正确调用 attachShadow 并传入 { mode: 'closed' } 或 { mode: 'open' }。

mode: 'closed' 会让 shadowRoot 无法被 JS 访问（el.shadowRoot === null），调试困难，一般只用于高安全场景
mode: 'open' 是默认推荐值，允许开发者通过 el.shadowRoot 检查和测试
不要在 constructor 中调用 attachShadow，应在 connectedCallback 中执行，避免重复 attach 导致 Failed to execute 'attachShadow' on 'Element': This element already has a shadow root
是内容分发的关键，没有它，外部传入的子节点不会显示在 shadow 内

class MyCard extends HTMLElement {
  connectedCallback() {
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
      
      
    `;
  }
}
customElements.define('my-card', MyCard);

为什么 `:host` 和 `::slotted()` 不能乱用

Shadow DOM 内部样式作用域有限，:host 匹配组件自身（即这个标签），::slotted(selector) 只能作用于被投影出去的**外部节点**，且只支持简单选择器（不能写 ::slotted(div p)）。

:host(.active) 有效，:host > div 无效（伪类外不能跟后代选择器）
::slotted(*) 可以匹配所有插槽内容，但 ::slotted(.foo .bar) 会静默失败
若需从外部控制 shadow 内样式，应暴露 CSS 自定义属性（--my-card-bg），并在 shadow 内用 var(--my-card-bg, #fff)

兼容性与构建时要注意什么

现代 Chrome/Firefox/Safari/Edge 均已原生支持，但 IE 完全不支持，iOS Safari 10.3+ 才开始支持 attachShadow；若需兼容旧环境，得引入 @webcomponents/webcomponentsjs polyfill。

polyfill 会污染全局，比如把 customElements.define 改成异步执行，导致注册顺序敏感
Vite/Webpack 等工具默认不处理 .html 模板字符串中的，建议把 shadow 内容写成 JS 字符串或用 innerHTML 赋值，避免构建时报错
服务端渲染（SSR）时，shadow DOM 不会被渲染
出来，需配合 hydrate 逻辑或降级为普通 DOM