attachshadow()是shadow dom唯一入口，必须显式调用并传{mode:'open'}；css变量靠继承透入，仅限可继承属性且须挂载于宿主或祖先；::slotted()仅支持可继承样式；:host宜配合css变量而非硬编码class实现主题解耦。
attachShadow() 必须显式调用，不能靠 innerHTML 注入 style
Shadow DOM 的样式封装不是自动生效的，attachShadow() 是唯一入口。如果只写 shadowRoot.innerHTML = '<div><slot></slot></div>'，再拼接 <style>button { color: red }</style>，那条 style 标签会被当作文本节点解析，根本进不了 CSSOM，后续 JS 修改也无效。
正确做法是分两步：
- 先设结构：
shadowRoot.innerHTML = '<button><slot></slot></button>' - 再用 JS 创建并注入样式：
const style = document.createElement('style'); style.textContent = 'button { background-color: var(--primary, #007bff); }'; shadowRoot.appendChild(style) - 务必传
{ mode: 'open' }——mode: 'closed'会让el.shadowRoot返回null，DevTools 里连 inspect 都做不到
CSS 变量能“透入”是因为继承，不是穿透
--primary 这类自定义属性之所以能在 Shadow DOM 内被 var(--primary) 拿到，不是浏览器开了后门，而是它顺着 DOM 继承链自然向下传递——但仅限可继承属性（color、font、background-color 等），且变量必须挂在宿主元素或其祖先上。
常见错误：
-
<div class="wrapper"><my-button></my-button></div>+.wrapper { --primary: red; }→ 变量没挂到<my-button></my-button>上，shadowRoot读不到 - 在 shadow 内部写
body { color: red }→body不是宿主，也不在 shadow 作用域内，浏览器直接跳过这条规则 - 消费时没写 fallback：
color: var(--text-color)→ 变量未定义就变透明/默认色，样式可能意外失效
推荐写法：<my-button style="--primary: #3b82f6;"></my-button> 或加 class：<my-button class="theme-dark"></my-button> + .theme-dark { --primary: #1e1e1e; }
::slotted() 只能改可继承属性，对 margin/padding 无效
::slotted() 是唯一能影响 slot 分发内容的伪类，但它有硬性限制：只允许设置可继承属性。这意味着你写 ::slotted(*) { margin: 16px; }，浏览器会安静地忽略它——margin 不可继承，CSS 引擎不认。
可用的场景很窄：
-
::slotted(p) { color: var(--text-color); }→ 有效，只作用于传入 slot 的顶层<p></p> -
::slotted(*) { font-size: 14px; }→ 有效，字体大小可继承 -
::slotted(div) { display: flex; }→ 无效，display不可继承，且::slotted()不支持布局类属性
想控制子元素布局？别动 ::slotted()，把结构和样式逻辑收回到 shadow 内部来处理，保持封装边界清晰。
:host 伪类响应外部状态要避免耦合写法
:host 匹配的是宿主元素自身（即 <my-button></my-button> 这个标签），可用于响应它的 class、属性或上下文，但容易写出难维护的硬编码逻辑。
比如这样写就埋了坑：
-
:host(.dark) button { background: #1e1e1e; }→ 主题逻辑锁死在组件内部，换主题就得改源码 -
:host-context(.app-dark) button→ 依赖外部 class 层级，一旦父容器 class 改名或结构变动，样式就断
更松散的做法是：外部设变量，内部消费变量。宿主加 class="theme-dark" → 外部 CSS 定义 .theme-dark { --bg: #1e1e1e; --text: #f1f5f9; } → shadow 内写 button { background-color: var(--bg); color: var(--text); }。变量方案解耦强，扩展新主题只需加一组 CSS 规则，不用碰组件 JS。
真正难处理的点在于：变量必须挂到宿主或其祖先，且 fallback 要写全；::slotted() 的能力边界比直觉窄得多；:host 看似灵活，一写具体 class 就反噬可维护性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
