web worker 无法操作 css 规则，因其运行于无 dom 的 dedicatedworkerglobalscope，缺少 document、cssstylesheet 等 api；唯一合法动作是纯计算并返回结构化样式数据，由主线程注入。
Web Worker 无法安全操作或动态引入 CSS 规则——这不是限制可以绕过的问题，而是浏览器明确禁止的行为。
为什么 document.styleSheets 在 Worker 中根本不存在
Worker 运行在 DedicatedWorkerGlobalScope 环境中，没有 document、window、document.styleSheets，甚至没有 CSSStyleSheet 构造函数（Safari 15.4+ 才支持，且仅限主线程调用）。试图访问 document.styleSheets[0].cssRules 会直接抛出 ReferenceError: document is not defined。
- 所有基于
insertRule、deleteRule、replaceSync的操作都要求样式表实例已挂载到 DOM，而 Worker 没有 DOM -
@import、<link>、<style></style>标签解析均由 HTML 解析器控制，Worker 里连字符串注入都无法触发样式加载 - 即使把 CSS 字符串传回主线程再插入
<style></style>，也必须由主线程完成，Worker 只能提供内容
Worker 能做的唯一合法动作：纯计算 + 结构化输出
如果你需要“动态生成 CSS 规则”，Worker 实际只能做三件事：解析输入参数、执行逻辑推导、返回可注入的字符串或键值对。它不参与任何样式注册、作用域绑定或重绘触发。
- 接收主线程传入的配置，例如：
{ theme: 'dark', fontSize: 16, spacingScale: 1.2 } - 运行主题算法（如根据亮度自动算出
--bg、--text值），或生成grid-template-columns表达式 - 输出结构化结果，例如：
{ vars: { '--primary': '#3b82f6', '--gap': '1rem' }, rules: ['.card { border-radius: var(--gap); }'] } - 绝不尝试构造
CSSStyleSheet、调用insertRule或拼接<style></style>字符串并试图写入 DOM
主线程如何安全接收并注入这些规则
Worker 返回的数据必须由主线程落地为真实样式。这里有两个推荐路径，取决于你是否需要作用域隔离：
- 若只需全局变量：用
document.documentElement.style.setProperty()批量设置 CSS 自定义属性，这是最轻量、最兼容的做法 - 若需 Shadow DOM 样式：主线程拿到
rules数组后，创建new CSSStyleSheet()，调用replaceSync(cssText)，再赋给shadowRoot.adoptedStyleSheets（注意 Safari - 切勿在主线程里用
innerHTML += '<style>...</style>'动态追加 —— 容易重复、无去重、无卸载机制 - 如果使用
@import字符串（比如 Worker 返回"@import './theme.css';"），主线程也不能直接插入；该语法只在<style></style>标签内有效，且会阻塞渲染，应彻底避免
真正容易被忽略的是：Worker 和主线程之间没有共享样式上下文。哪怕你传过去一整套 CSS 文本，它也不会“自动生效”——必须由主线程显式挂载、注入、或触发重排。这个边界不是性能优化点，而是强制的安全契约。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
