cssstylesheet 构造函数不可安全使用，因仍是实验性api且仅chromium部分支持；唯一跨浏览器兼容方式是通过插入再移除元素获取其.sheet实例，该实例可被多个shadowroot共享并动态操作。
CSSStyleSheet 构造函数目前不能直接安全使用。截至 2026 年中，它仍是实验性 API，仅 Chromium 浏览器（Chrome/Edge ≥125）在启用 chrome://flags/#enable-experimental-web-platform-features 后部分支持；Safari 和 Firefox 完全不识别，调用 new CSSStyleSheet() 会立即抛出 TypeError: Illegal constructor。
为什么 new CSSStyleSheet() 在生产环境会失败
浏览器厂商尚未将其纳入正式标准，规范仍处于草案阶段。即使在支持的 Chromium 版本中，该构造函数也缺少关键能力（如无法设置 baseURL 或正确解析相对 URL），且行为不稳定。更重要的是：它创建的对象无法被多个 ShadowRoot 共享 —— 这与“可共享样式表”的核心需求直接冲突。
如何拿到真正可复用的 CSSStyleSheet 实例
唯一稳定、跨浏览器兼容的方式是通过 <style></style> 元素的 .sheet 属性提取底层实例。这个 .sheet 是真实、可操作、可被多个 adoptedStyleSheets 复用的 CSSStyleSheet 对象。
- 必须先将
<style></style>元素插入 DOM（例如document.head.appendChild(style)），.sheet才会被初始化，否则为null - 插入后立即移除该元素（
document.head.removeChild(style)），避免污染主文档样式流 - 只创建一次，后续所有
adoptedStyleSheets都引用同一个sheet实例 - 该
sheet支持.insertRule()、.deleteRule()、.cssRules等动态操作
示例：
const style = document.createElement('style');
const sheet = style.sheet; // 此时为 null
document.head.appendChild(style); // 必须 append 才能触发初始化
// 现在 sheet 是有效实例
document.head.removeChild(style);
// 复用
customElement1.shadowRoot.adoptedStyleSheets = [sheet];
customElement2.shadowRoot.adoptedStyleSheets = [sheet];
sheet.insertRule('.btn { padding: 8px; }', 0);
adoptedStyleSheets 赋值时的常见错误
直接赋值数组时容易忽略两个关键点：
-
adoptedStyleSheets是只读属性，不能用=赋值，必须用数组字面量整体替换（adoptedStyleSheets = [sheet]合法，adoptedStyleSheets.push(sheet)报错） - 赋值目标必须是
ShadowRoot或Document实例，对普通HTMLElement赋值无效 - 若需合并已有样式表，应先读取再拼接：
elem.shadowRoot.adoptedStyleSheets = [...elem.shadowRoot.adoptedStyleSheets, newSheet] - 不要重复创建
<style></style>元素来获取新sheet—— 每次都生成新对象，失去“共享”意义
真正麻烦的地方不在语法，而在于：你得记住 .sheet 只在插入 DOM 后才可用，且一旦移除元素，sheet 依然存活并可被多处引用 —— 这个生命周期和 DOM 元素解耦的特性，恰恰是它能共享的根本，但也最容易被当成普通 DOM 节点一样误删或重置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
