CSS-in-JS样式不进Shadow DOM是因为其默认注入document.head，而Shadow DOM仅识别内部<style>或adoptedStyleSheets；必须手动将生成的CSS通过adoptedStyleSheets或appendChild(style)注入shadowRoot，否则样式无法匹配内部元素。
为什么CSS-in-JS生成的样式不进Shadow DOM
CSS-in-JS库（如Emotion、Styled Components）默认把样式注入到document.head，而Shadow DOM有独立的样式作用域——它只认自己内部的<style>或adoptedStyleSheets，完全无视全局<style>节点。所以即使你写了styled.div`color: red`，生成的CSS规则也压根不会匹配Shadow DOM里的元素。
怎么把CSS-in-JS样式正确注入Shadow Root
不能靠innerHTML或appendChild(styleEl)直接塞入字符串样式——那会丢掉<style>标签，更糟的是，部分CSS-in-JS库（如JSS）依赖document.styleSheets做动态更新，而Shadow DOM里没有这个上下文。
- 用
adoptedStyleSheets：现代方案，需确保浏览器支持（Chrome 73+、Firefox 96+、Safari 17.4+）；先调用库的css或createGlobalStyle生成CSSStyleSheet实例，再赋给shadowRoot.adoptedStyleSheets - 手动创建
<style>并插入：兼容性更好，但失去热重载和动态更新能力；用style.textContent = generatedCSS，然后shadowRoot.appendChild(style) - 避免
insertRule直接操作shadowRoot.ownerDocument.styleSheets——它操作的是全局sheet，不是Shadow内的
Scoped class名在Shadow DOM里失效的真相
很多CSS-in-JS库会给class加哈希后缀（如css-abc123），这本身没问题；但问题出在：如果你在Shadow DOM外用querySelector('.css-abc123')去选元素，永远找不到——因为该class只存在于Shadow内部DOM树，且外部选择器无法穿透边界。
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
- 调试时别在Elements面板里搜
.css-abc123，要右键Shadow Root → “Reveal in Elements panel”，再在里面找 - 不要用
document.querySelector跨boundary查Shadow内节点，改用shadowRoot.querySelector - 若需从外部控制状态（如主题切换），靠
:host([data-theme="dark"]) ::part(foo)比依赖class名更可靠
第三方组件（如React + Shadow DOM）的样式加载时机坑
React渲染完再往shadowRoot里append节点，但CSS-in-JS样式可能还没注入完成——尤其用了异步CSS提取（如extractCritical）时，容易出现“闪白”或初始样式丢失。
立即学习“前端免费学习笔记（深入）”；
- 确保
useEffect或componentDidMount里等样式sheet ready后再挂载Shadow内容 - 对Emotion，可用
cache.sheet.container判断是否已插入；对Styled Components，监听cache.sheet.tags长度变化 - 不要在
constructor里就调attachShadow然后立刻注入样式——此时React尚未render，节点为空，样式无处绑定
