直接在 shadowroot.innerhtml 里写 无效，因为 shadow dom 边界主动拦截所有基于 html 解析的样式注入（包括 、内联 、@import），浏览器不 fetch 也不解析其内容；唯一规范认可的方式是 adoptedstylesheets，需用 cssstylesheet 实例显式挂载。
直接在 shadowRoot.innerHTML 里写 <link rel="stylesheet"> 为什么无效
浏览器根本不会 fetch 或解析 shadowRoot 内部的 <link> 标签——这不是加载失败，而是被 Shadow DOM 边界主动拦截。你能在 DevTools 里看到这个节点，但 computed styles 里查不到任何来自它的规则。
- 所有基于 HTML 解析的样式注入（
<link>、<style></style>拼在字符串里、@import）在 shadowRoot 内部都失效 - 动态创建
<link>并appendChild到 shadowRoot 同样无效，它只是个 DOM 节点，不触发资源加载 - CSP 策略不影响这个行为，因为问题出在 Shadow DOM 架构层，不是安全策略
推荐方案：用 adoptedStyleSheets 加载外部 CSS
这是目前唯一被规范认可、能真正把外部 CSS 注入 shadowRoot 的方式，且支持变量继承、媒体查询和动态更新。
- 必须用
CSSStyleSheet实例，不能传字符串或<style></style>元素 - 典型流程：
fetch('theme.css').then(r => r.text()).then(css => new CSSStyleSheet().replaceSync(css))，再赋值给shadowRoot.adoptedStyleSheets = [sheet] - 多个组件共用同一份样式？复用同一个
CSSStyleSheet实例即可，避免重复解析 - 注意兼容性：Chrome 73+、Firefox 94+、Safari 16.4+ 支持；旧版 Safari 需降级 fallback
兼容性 fallback：动态创建 <style></style> 并注入
当 adoptedStyleSheets 不可用时，这是最稳妥的兜底方式，但需手动处理内容加载。
- 禁止：
shadowRoot.innerHTML = '<style>...</style>'——<style></style>会被当作文本节点，不进 CSSOM - 正确做法：
const style = document.createElement('style'); style.textContent = cssText; shadowRoot.appendChild(style) - 若 CSS 来自文件，仍需先
fetch，再设textContent；不要拼接用户输入，防 XSS - 每次实例化都执行一次，无缓存，上线前建议提取为独立
.css文件并预加载
::part() 和 :host 不是引入外部 CSS 的方法
它们是样式“透传”的出口，不是入口。想靠 my-button::part(button) { color: red } 让外部样式生效，前提是组件内部已用 part="button" 显式暴露了该节点。
-
::part()只对带part属性的元素生效，且不支持嵌套选择器（::part(button) span无效） -
:host只能选中宿主元素自身，不能用来加载外部样式文件 - CSS 变量（
var(--color)）可穿透，但变量本身必须由宿主元素显式定义，Shadow DOM 不自动继承:root变量
<link> 在 shadowRoot 里还能工作——它从设计上就被禁用了。选 adoptedStyleSheets 还是手动生成 <style></style>，取决于你的目标浏览器和是否需要主题热切换。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
