Shadow DOM样式不生效需检查mode是否为open；全局样式无法穿透，须注入shadowRoot内部；:host和::slotted是内外样式通信唯一合法通道；兼容性差需检测attachShadow存在性并准备降级方案。
Shadow DOM里样式不生效？检查mode是否设为closed
Shadow DOM默认用open模式，才能从外部访问和调试样式；设成closed后，连shadowRoot都拿不到，自然没法注入或覆盖CSS。
-
closed模式下，element.shadowRoot返回null，任何尝试往里面appendChild样式表都会静默失败 - 开发阶段优先用
open，上线前再切closed（但注意：这并不能真正防篡改，只是增加门槛） - Chrome DevTools里能看到
#shadow-root (open)才说明模式正确，否则得回头检查attachShadow({ mode: 'open' })
全局样式进不了Shadow DOM？别靠<link>或<style>外链
Shadow DOM有样式边界，外部CSS规则默认不穿透，<link rel="stylesheet">或页面级<style>里的选择器对内部元素完全无效。
- 必须把样式写进Shadow Root内部：用
document.createElement('style')创建后appendChild到shadowRoot - 或者用
CSSStyleSheet对象+replaceSync()动态注入（适合主题切换场景） - 避免在
connectedCallback里反复创建<style>节点——每个实例都会多一份样式，内存泄漏风险
想复用CSS变量？用:host和::slotted控制作用域边界
Shadow DOM不是完全封闭的，:host选中宿主元素本身，::slotted选中投射进来的子节点，这两者才是打通内外样式的合法通道。
-
:host支持伪类（如:host(:hover)）和参数化（:host([size="large"])），但不支持后代选择器（:host div无效） -
::slotted(*)能影响传入的任意子元素，但无法穿透到子元素的Shadow DOM里——它只管“第一层”投射内容 - CSS变量要靠宿主元素上声明，
:host内用var(--color)读取；子组件不能直接继承外部:root变量
兼容性差？别在IE或旧版Safari里硬扛
Shadow DOM v1（即现在标准）在IE全系、iOS Safari 10.3以下、Android Browser里根本不存在，attachShadow直接undefined。
立即学习“前端免费学习笔记（深入）”；
- 检测方式必须是
'attachShadow' in Element.prototype，而不是查window.ShadowRoot（有些polyfill会伪造后者） - 不要用
customElements.define配合Shadow DOM当兜底——没Shadow DOM时，自定义元素照样能注册，但样式隔离就彻底失效 - 如果必须支持老浏览器，得准备两套渲染逻辑：一套用Shadow DOM，一套用BEM类名+命名空间前缀模拟隔离
真正在意样式隔离效果时，Shadow DOM不是“开了就完事”的开关，而是整条链路——从创建模式、样式注入时机、变量传递路径，到降级方案的设计，漏掉哪一环都会让隔离变成幻觉。
