Shadow DOM 样式隔离靠浏览器原生机制实现，外部CSS无法进入、内部CSS无法泄露；必须用attachShadow()创建影子根，内联样式需注入shadowRoot，仅:host和::slotted允许有限穿透。
Shadow DOM 实现样式“彻底隔离”不是靠技巧堆砌，而是靠浏览器原生机制 + 正确使用规范接口。它默认就阻断样式穿透——外部 CSS 进不去，内部 CSS 出不来，这不是理想状态，是浏览器强制行为。关键在于别破坏这个边界，也不误以为能绕过它。
用 attachShadow 创建真正的隔离容器
必须调用 attachShadow() 显式挂载影子根，不能靠 innerHTML 或模板字符串硬塞 style 标签。否则 style 不进 CSSOM，无法动态更新，也失去作用域保障。
- 始终用
{ mode: 'open' }—— closed 模式让element.shadowRoot返回null，调试不可见、测试难覆盖、维护成本高，实际项目中基本不用 - 在自定义元素的
constructor中检查this.shadowRoot是否已存在，避免重复调用attachShadow()报错 - 不要在
connectedCallback里反复挂载，每次插入都会触发，必然报错
所有样式必须内置于 Shadow Root 内部
Shadow DOM 的样式作用域只认自己树内的 CSS。外部 或 根本不参与其样式计算流程，!important 也无效——不是权重不够，是压根没被解析。
- 推荐方式：创建
style元素后appendChild到shadowRoot，或使用CSSStyleSheet（adoptedStyleSheets在 Safari 17.4+ 才稳定） - 禁止把第三方 CSS（如 Bootstrap、Font Awesome）的
直接写进shadowRoot.innerHTML，那样会加载到全局，完全失去隔离意义 - 慎用全局选择器，比如
button { }；应限定作用范围，如:host button { }或加 scope 类名
可控穿透只能靠 :host 和 ::slotted
这是 W3C 规范中唯二允许跨 boundary 的样式钩子，其余所有“穿透”写法（如 /deep/、::ng-deep、>>>）已在 Chrome 120+、Firefox 115+ 中移除支持，继续使用等于制造兼容性故障。
-
:host只匹配宿主元素自身（即:host([disabled]) { opacity: 0.5; } -
:host-context(.dark)检测祖先链是否含指定类，用于主题透传；:host(.dark)是常见误用，它只查宿主自身是否有 class，不查 body -
::slotted(p)只匹配带slot属性的顶层子节点（如xxx
别指望样式影响外部，逻辑通信要另走通道
Shadow DOM 内部的 CSS 绝对无法修改外部任何元素的样式——这是设计铁律。想让外部响应组件状态，得靠约定式通信：
- 通过属性暴露状态，如
my-slider[value="42"]做条件样式 - 用自定义事件通知变化：
this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));，漏掉composed: true，外部监听不到 - 避免直接操作
document.styleSheets或document.head，既不可靠，也违背封装原则
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
