在 shadowroot 中 append 是最稳写法，document.createelement('style') + textcontent + shadowroot.appendchild() 兼容性最好、行为最可预测，不依赖 cssstylesheet 构造函数，safari 15、firefox 80、ie11（配 polyfill）均支持。
直接在 shadowRoot 中 append <style></style> 是最稳写法
只要不追求极端性能或跨组件复用，document.createElement('style') + textContent + shadowRoot.appendChild() 就是兼容性最好、行为最可预测的方式。它不依赖 CSSStyleSheet 构造函数，Safari 15、Firefox 80、甚至 IE11（配合 polyfill）都能跑通。
常见错误现象包括：shadowRoot.innerHTML = '<style>...</style>' 看似简洁，但生成的是文本节点而非样式节点，CSSOM 不解析；或者把 <style></style> 插到内部 div 下，而不是 shadowRoot 直系子节点，导致样式完全不生效。
-
textContent比innerHTML更安全，避免 HTML 解析开销和 XSS 风险 - 样式字符串必须是纯 CSS，不能含
@import或@charset - 若需动态更新，直接改
style.textContent即可，浏览器自动重计算 - 调试时在 DevTools 展开
shadowRoot，确认<style></style>节点存在且规则能匹配目标选择器（如.modal）
用 CSSStyleSheet + adoptedStyleSheets 是现代标准方案
这是唯一被规范明确定义的“合法穿透”方式，支持样式实例复用、动态替换、变量继承，且不触发重排。但它要求三步全部走完：创建实例 → 注入内容 → 挂载数组，缺一不可。
常见错误包括：new CSSStyleSheet() 后没调 replaceSync()，结果样式为空；误写成 shadowRoot.styleSheets = [sheet]（styleSheets 是只读快照）；或试图把 document.querySelector('link').sheet 直接赋过去（该实例未激活，浏览器拒绝 adopt）。
-
replaceSync()适合初始化小样式，阻塞 JS 执行但无异步时序问题 - 大文件建议用
replace()并await，避免主线程卡顿 -
adoptedStyleSheets是只写数组，多次赋值会覆盖，不是追加 - 多个 shadow root 可共享同一
CSSStyleSheet实例，但移除一个 root 不会影响其他 root 的挂载状态
@import 在 <style></style> 内部要慎用
@import 语法上合法，但执行时同步阻塞渲染，实测首屏延迟 300–600ms，且 SSR/HMR 场景下基本失效。它还绕过构建工具依赖分析，无法哈希、压缩、做 CSP 审计。
典型翻车点：服务端渲染时 @import 完全不下载；热更新后样式块被丢弃；路径按 HTML 文档 URL 解析，不是组件 JS 所在位置，极易 404；返回 404/500 时整个 <style></style> 块被浏览器静默忽略，无任何提示。
- 路径基于当前文档 URL，不是模块路径，容易错位
- Chrome 120+ 才稳定支持，旧版 Safari/Firefox 表现不一
- Webpack/Vite 等无法识别该引用，不能做 tree-shaking
- 不要指望
@import能替代fetch + replaceSync的可控性
:host 和 ::slotted 是唯一能“穿墙”的选择器
Shadow DOM 样式失效，往往不是权重不够，而是根本“看不见”外部规则。:host 匹配组件自身标签，::slotted() 控制投影内容——它们是规范内唯一允许跨 boundary 的机制。
常见误解是以为 ::slotted(*) 能控制所有内部元素，其实它只作用于 <slot></slot> 投射进来的节点，对组件自己写的 <button></button> 完全无效。想暴露内部样式钩子，得用 part 属性 + ::part()，但后者兼容性仍有限（Safari 15.4+，Firefox 96+）。
-
:host { color: var(--text-primary, #333); }可读取宿主元素上的 CSS 变量 -
:host([disabled])支持属性匹配，比 class 更语义化 -
::slotted(h2)只影响投射进来的<h2></h2>，不能设display或margin等非继承属性 -
part="button"必须显式写在组件内部元素上，外部才能用my-component::part(button)选中
part 命名约定这些细节，不在浏览器报错范围内，却最常导致样式“看起来写了但没生效”。动手前先确认你用的是哪一层穿透逻辑：是组件内部封闭样式，还是与宿主协同的主题系统，抑或留给使用者的定制接口——选错路径，后面所有代码都白写。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
