CSSStyleSheet对象是浏览器解析后的样式表只读接口，不能直接“引入”样式；它需通过new CSSStyleSheet()创建并用replaceSync()/replace()注入规则，再挂载到shadowRoot.adoptedStyleSheets才能生效。
什么是 CSSStyleSheet 对象？它能直接“引入”样式吗？
CSSStyleSheet 本身不是用来“引入”样式的工具，而是浏览器解析后的样式表的只读接口。你不能用它像 import 或 link 那样加载外部 CSS 文件；它只代表已存在（或动态创建）的样式规则容器。真正能“引入”样式的，是 document.styleSheets 列表里的项，或你手动插入的 style / link 元素。
-
CSSStyleSheet实例通常来自：document.createElement('style').sheet、document.styleSheets[i]、或new CSSStyleSheet()（需配合adoptedStyleSheets） - 它没有
load()、import()等方法，调用会报TypeError: Illegal invocation - 想加载远程 CSS？得走
link元素 +onload，或者 fetch 后注入文本
如何用 new CSSStyleSheet() 创建并生效样式？
new CSSStyleSheet() 是现代方案（Chrome 85+、Firefox 99+、Safari 17.4+），但它不会自动生效，必须显式挂载到 DOM 或 ShadowRoot 上：
- 必须用
replaceSync()或replace()写入规则（不能直接改cssRules） - 单独创建的
CSSStyleSheet不会作用于任何元素，除非：- 插入到
document.adoptedStyleSheets（仅对 Document-level 样式有效，且需启用Document.adoptedStyleSheets特性） - 或挂到
ShadowRoot.adoptedStyleSheets（更常见，用于 Web Components）
- 插入到
const sheet = new CSSStyleSheet();
sheet.replaceSync(`.btn { color: red; padding: 4px; }`);
<p>// 挂到 shadow root（推荐）
const shadow = elem.attachShadow({ mode: 'open' });
shadow.adoptedStyleSheets = [sheet];</p><p>// 或挂到 document（有限支持，部分浏览器不生效）
if (document.adoptedStyleSheets) {
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
}</p>注意：document.adoptedStyleSheets 在多数浏览器中仍为只读数组（赋值会静默失败），实际兼容性远不如 ShadowRoot 场景。
为什么 document.styleSheets[i].insertRule() 有时无效？
常见错误是试图往未插入 DOM 的 style 元素的 sheet 上写规则，或忽略规则语法/顺序限制：
Java Maven Common
下载
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
立即学习“Java免费学习笔记（深入）”；
-
insertRule()只对已挂载的style或link对应的 sheet 生效 - 规则字符串必须符合 CSS 语法，比如漏掉花括号、分号，或用了不支持的语法（如嵌套、变量未定义）
- 插入位置索引超出当前规则数时会抛
IndexSizeError -
@media、@keyframes等 at-rule 必须用insertRule()而非addRule()（后者已废弃）
const style = document.createElement('style');
document.head.appendChild(style); // 必须先挂载！
const sheet = style.sheet;
<p>// ✅ 正确
sheet.insertRule('.card { border: 1px solid #ccc; }', 0);</p><p>// ❌ 无效：style 还没 append 到 DOM，sheet 可能为 null 或只读
// const sheet = document.createElement('style').sheet;
// sheet.insertRule(...);</p>fetch CSS 文件后怎么安全注入到 stylesheet？
fetch 返回的是文本，不是 CSSOM；不能直接 assign 给 sheet.cssText（该属性只读）。正确路径是：
- 创建
style元素，设textContent，再 append 到 head - 或用
CSSStyleSheet.replace()（异步）配合fetch().then(r => r.text())
fetch('/theme.css')
.then(r => r.text())
.then(css => {
const sheet = new CSSStyleSheet();
return sheet.replace(css); // 返回 Promise
})
.then(() => {
// 挂到 shadow root
shadow.adoptedStyleSheets = [sheet];
});
关键点：
-
replace()是异步的，replaceSync()只接受同步字符串，不能含@import -
@import在replaceSync()中会被忽略，且无法触发加载，务必避免 - 如果需要
@import或字体等资源加载控制，老办法——用link更可靠
原生 JS 操作样式表最易被忽略的，是“挂载时机”和“作用域归属”：sheet 创建了不等于生效了，生效了也不等于作用于你预期的元素。尤其在 Shadow DOM 场景下，adoptedStyleSheets 是单向绑定，替换数组后旧 sheet 就失效了。
