不能直接用innerHTML写CSS字符串，因为浏览器会将{、}、:等符号误解析为HTML结构或实体，导致样式规则被截断或忽略；必须用style.textContent = cssString确保原样注入。
直接用 fetch() 拿到 CSS 字符串后，不能直接塞进 innerHTML 或当 HTML 解析，必须转成 <style> 元素并设 textContent 才能生效。
为什么不能用 innerHTML 写 CSS 字符串
浏览器会把 {、}、: 等符号当作 HTML 实体或标签结构处理，导致样式规则被截断或完全忽略。比如 style.innerHTML = "body { color: red; }" 在某些浏览器中解析失败，控制台可能静默丢弃整段内容。
- 始终用
style.textContent = cssString，不碰innerHTML - 若 CSS 字符串含单引号、双引号或反斜杠（如
url("a.jpg")），需提前在 JS 字符串中正确转义，否则语法报错 - 大量规则建议拆成多个
<style>标签，方便后续用element.remove()精准卸载
fetch() 加载 CSS 文件时如何防超时和失败
CSS 加载失败不会触发 Promise 的 catch（HTTP 404/500 仍算 fulfilled），但页面会白屏或样式错乱。必须手动加超时和错误兜底。
小红书长文-谷歌浏览器
下载
在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit，触发小红书发布。
- 用
AbortController控制 fetch 超时：const controller = new AbortController(); setTimeout(() => controller.abort(), 8000); - fetch 后检查
response.ok，不是只靠then/catch - 失败时 fallback 到内联默认样式，例如插入一个含基础重置规则的
<style>标签
动态注入的 CSS 如何避免重复加载
多次调用注入逻辑可能导致同一份 CSS 被插入多遍，造成样式权重混乱或内存泄漏。
立即学习“前端免费学习笔记（深入）”；
- 插入前先查是否存在相同内容的
<style>：document.querySelector(`style[data-id="theme-dark"]`)，推荐加data-id标识 - 不要靠 CSS 内容哈希判断——长文本比对开销大，且无法处理注释/空格差异
- 若通过
<link rel="stylesheet">加载外部文件，务必检查document.querySelector('link[href="/theme.css"]')是否已存在
真正麻烦的是跨域 CSS：fetch 拿不到响应体，onerror 也不触发，只能靠预检或服务端代理。别指望浏览器自动告诉你它悄悄失败了。
