动态注入CSS最稳方式是createElement('style')并设id后插入head，需避免重复插入、及时清理、注意Shadow DOM作用域及优先级，配合matchMedia或IntersectionObserver按需加载。
用 document.createElement('style') 动态加 CSS 最稳
直接操作 DOM 插入 style 标签，是目前兼容性最好、控制最细的方式。比改 className 或操作 stylesheet.cssRules 更可靠，尤其在跨域样式表或 Shadow DOM 场景下不会报错。
常见错误是往 head 里重复插入同一样式块，导致多次计算、内存泄漏；或者没清空旧样式就重插，样式叠加出意料之外的效果。
- 每次注入前先查有没有已存在的
id或data-*标识的style标签，有就remove()再新建 - 给
style元素加id="dynamic-theme"或data-origin="theme-switch"，方便后续定位和清理 - 样式内容用
textContent赋值，别用innerHTML（XSS 风险 + IE 不支持）
const style = document.createElement('style');
style.id = 'dynamic-theme';
style.textContent = `body { background: #f0f0f0; }`;
document.head.appendChild(style);
监听 window.matchMedia 切换深色模式时注入样式
这是最典型的「特定条件」：用户系统偏好变化。用 matchMedia 比监听 prefers-color-scheme 的 CSS 自变量更可控，JS 层能立刻响应并注入完整规则块，不依赖浏览器重绘时机。
容易踩的坑是只监听一次，没调用 addEventListener，导致切换系统设置后样式不更新；或者把媒体查询写成 (prefers-color-scheme: dark) 却忘了加引号，在模板字符串里漏转义。
立即学习“前端免费学习笔记（深入）”；
- 必须用
mql.addEventListener('change', handler)，IE10+ 支持，现代浏览器都 OK -
mql.matches是初始状态，别只靠它设一次就完事 - 注入的样式建议带
!important（仅限覆盖级），否则可能被已有 CSS 权重压制
const mql = window.matchMedia('(prefers-color-scheme: dark)');
function applyTheme() {
const style = document.getElementById('dynamic-theme') || document.createElement('style');
style.id = 'dynamic-theme';
style.textContent = mql.matches
? `body { background: #1a1a1a !important; color: #eee; }`
: `body { background: #fff; color: #333; }`;
document.head.appendChild(style);
}
mql.addEventListener('change', applyTheme);
applyTheme(); // 立即执行一次
用 IntersectionObserver 触发懒加载组件样式
当某个模块（比如评论区、图表卡片）进入视口才加载对应样式，能减少首屏 CSS 体积。关键不是“要不要加”，而是“加完要不要回收”——滚动反复进出时频繁增删 style 标签会抖动、卡顿。
性能影响明显：每次新增 style 都触发样式计算和布局重排。如果组件多、样式大，得节流或用 requestIdleCallback 延后注入。
- 每个被观察的元素绑定独立的
styleID，如data-style-id="comment-section" - 离开视口时不清除样式（避免闪回），但可设一个 flag 控制是否允许二次注入
- 样式内容建议提前定义好字符串常量，别在回调里拼接大量模板
注意 style 标签注入后的作用域和优先级
动态插入的 style 默认全局生效，但若页面用了 Shadow DOM，它只影响 light DOM；而通过 shadowRoot.adoptedStyleSheets 注入的则只对 shadow 内部有效——这两者不能混用，否则样式完全不出现。
另一个隐形坑是 CSS 优先级：动态注入的 style 标签顺序决定层叠权重，它总在 link[rel=stylesheet] 后面，但可能被后面插入的其他 style 覆盖。调试时看 DevTools 的 Computed 面板里“sources”列，能快速定位哪条规则实际生效。
- 想确保高优，用
document.head.insertBefore(style, document.head.firstChild)插到最前面 - 避免在
style里写@import，它会阻塞渲染且无法异步加载 - 服务端渲染（SSR）页面要注意：JS 注入的样式在首屏 HTML 里不存在，SEO 和无 JS 环境下会降级
style 标签，积多了就是隐藏的内存和样式冲突源。 
