Shadow DOM本身不实现原子化，它只提供隔离边界；所谓“插件样式的原子化”，本质是用Shadow DOM封装最小职责单元（如my-alert、my-input），再靠:host和::slotted()建立可控协作契约——不是自动拆分，而是人工划定粒度并守住边界。
Shadow DOM 本身不实现原子化，它只提供隔离边界；所谓“插件样式的原子化”，本质是用 Shadow DOM 封装最小职责单元（如 my-alert、my-input），再靠 :host 和 ::slotted() 建立可控协作契约——不是自动拆分，而是人工划定粒度并守住边界。
为什么直接 attachShadow() 不等于原子化
常见错误是给每个 div 都调用 attachShadow()，结果产出一堆无法复用、职责模糊的影子树。原子化的核心不在“有没有 Shadow DOM”，而在组件是否只做一件事、接口是否清晰、样式是否可预测。
-
DOMException: Failed to execute 'attachShadow' on 'Element': Shadow root cannot be created on a node already hosting a shadow root.这类报错往往源于强行套壳，比如在已封装的<my-card>内部又对子<div>调用attachShadow() - 原子组件必须有明确输入出口：通过宿主属性（如
size="large"）、<slot>内容、CSS 自定义属性（如--alert-color）接收控制，而非依赖外部 class 或全局样式 - 一个
<my-alert>组件若同时处理图标、标题、按钮、关闭逻辑，就不是原子——它该拆成<my-icon>、<my-button>等更小单元，各自独立挂载 Shadow DOM
如何让原子组件真正“可组合”而不失样式控制
父组件（如 <my-dialog>）组合多个原子组件时，样式穿透必须走规范通道，否则主题、尺寸、状态会脱节。
- 用
:host([theme="dark"]) button控制内部按钮颜色，而不是写.my-alert__button--dark—— 后者易被外部覆盖，前者由宿主属性驱动，不可绕过 -
::slotted(my-icon)可设color和vertical-align，但不能设margin或display；布局责任必须留给使用者，比如<my-alert><my-icon slot="icon"></my-icon></my-alert>的外层需自行控制间距 - 主题变量要显式继承：
:host { --alert-bg: var(--surface, #fff); color: inherit; font-family: inherit; }，否则<body style="font-family: system-ui">的字体不会透入
动态注入样式时最容易踩的坑
原子组件常需运行时切换主题或适配环境，但拼字符串注入样式会直接破坏隔离性和可维护性。
立即学习“前端免费学习笔记（深入）”；
- 禁止写
shadowRoot.innerHTML = `<style>${css}</style>`——<style>标签会被当普通 HTML 解析，不进 CSSOM，后续 JS 修改sheet.cssRules完全无效 - 正确做法是分两步：
const style = document.createElement('style');→style.textContent = css;→shadowRoot.appendChild(style); - 复用基础样式（如重置行高、字体）推荐预建
CSSStyleSheet实例：const baseStyles = new CSSStyleSheet(); baseStyles.replaceSync('body { line-height: 1.5; }');，再赋值给shadowRoot.adoptedStyleSheets = [baseStyles]（注意 Safari 16.4+ / Chrome 73+ 支持）
调试时看不到 shadowRoot？先检查 mode
开发中查不到 element.shadowRoot，大概率是用了 { mode: 'closed' } —— 这会让 shadowRoot 返回 null，DevTools 无法 inspect，测试也无法覆盖。
- 日常开发一律用
{ mode: 'open' }，这是唯一能保证调试、测试、审查工具可用的模式 - 在自定义元素
constructor中检查this.shadowRoot是否已存在，避免重复调用attachShadow()报InvalidStateError - 不要在
connectedCallback里反复挂载：每次 DOM 插入都会触发，必然出错
原子化的关键不在 Shadow DOM 的数量，而在每个组件是否只承担单一职责、是否通过 :host 和 ::slotted() 显式定义协作边界；一旦把布局、主题、状态耦合进内部样式，再深的 Shadow DOM 也救不回失控的封装。
