只有 new CSSStyleSheet() 创建的实例才能被多个 Shadow Root 共享；需用 replaceSync() 或 insertRule() 修改规则，且所有已 adopt 的 Shadow Root 会实时响应样式变更。
能共享，但必须用 CSSStyleSheet 实例，不能用 <style> 或 <link> 的 .sheet；共享后所有 Shadow Root 实时响应样式变更，但修改规则必须用 replaceSync() 或 insertRule()，不能碰 cssText。
怎么创建一个真正可共享的 CSSStyleSheet 实例
只有 new CSSStyleSheet() 创建的对象才能被多个 Shadow Root 同时 adopt。从 <style> 元素取出来的 .sheet、<link> 的 .sheet，或者 document.styleSheets 里的任何项，都不能被 adopt——浏览器静默忽略。
-
const sheet = new CSSStyleSheet();是唯一可靠起点 - 创建后必须立即注入规则，否则是空表：
sheet.replaceSync('.btn { padding: 4px 8px; }'); - 不要试图用
sheet.cssRules读取后再改写：它只读，且长度为 0 直到规则注入完成 - 若需复用已有 CSS 字符串（比如从
import css from './button.css' assert { type: "css" };得到），直接赋值即可：shadow.adoptedStyleSheets = [css];
怎么把同一份 sheet 挂到多个 Shadow Root 上
直接赋值数组，引用相同对象即可。不需要克隆，也不需要深拷贝——共享靠的是对象引用。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 确保每个 Shadow Root 都已通过
el.attachShadow({ mode: "open" })创建好 - 对每个 shadow root 执行：
shadow.adoptedStyleSheets = [sheet]; - 后续调用
sheet.replaceSync()或sheet.insertRule()，所有已 adopt 的 shadow root 会同步更新样式 - 避免在不同 shadow root 间混用
adoptedStyleSheets和内联<style>：一旦启用 adopted，该 shadow root 内的<style>标签就失效了
为什么 insertRule() 后样式没变，或报错“Failed to execute 'insertRule'”
常见于误用场景：要么 sheet 还没注入规则就被插入，要么位置索引越界，要么规则语法非法。
立即学习“前端免费学习笔记（深入）”；
-
insertRule()只接受单条 CSS 规则字符串，例如'button:hover { opacity: 0.8; }'，不能传多条或带@media - 插入位置必须是有效索引：
sheet.insertRule(rule, sheet.cssRules.length)是安全追加方式 - 如果之前用过
replaceSync()，再调insertRule()是允许的；但若 sheet 仍是空的（cssRules.length === 0），插到索引 0 会失败 - 更稳妥的增量更新方式是：每次用
replaceSync()重写整个规则集，尤其适合主题切换等整块替换场景
兼容性与降级要点
Chrome 73+、Firefox 94+、Safari 15.4+ 支持 adoptedStyleSheets；IE 完全不支持，旧版 Safari（
- 检测是否可用：
if ('adoptedStyleSheets' in ShadowRoot.prototype) - 不支持时，降级方案只能是往每个 shadow root 里 append 一个
<style>节点，并注入相同 CSS 字符串 - 注意 CSP 策略：内联
<style>可能被style-src 'self'拦截，而adoptedStyleSheets不受此限制 - 动态加载 CSS 文件时，别用
fetch(...).then(r => r.text()).then(css => sheet.replaceSync(css))，要 catch 错误并处理空响应，否则replaceSync('')会让样式清空
最易被忽略的一点：共享的 CSSStyleSheet 实例无法被序列化，也不能跨 Worker 或 iframe 传递；所有 adopt 它的 shadow root 必须同源且在同一 JS 执行上下文中。一旦页面重载或组件销毁重建，就得重新创建和挂载。
