webview.insertcss 必须等 dom-ready 才能生效，因为该方法需向访客页面的渲染上下文注入 css，而 dom 未构建完成时注入会静默失败；dom-ready 表示页面 dom 已解析就绪，此时注入才可靠生效。
webview.insertCSS 为什么必须等 dom-ready 才能生效
因为 insertCSS 是向访客页面（guest page）注入样式，而该页面的 DOM 尚未构建完成时，Electron 无法安全地将 CSS 注入到渲染上下文中。过早调用会静默失败，不报错也不生效。
常见错误现象：insertCSS 调用后页面样式无变化，控制台也无报错；或只在刷新后偶现生效。
- 正确时机是监听
dom-ready事件，不是did-stop-loading—— 后者仅表示网络加载结束，DOM 可能仍在解析或 JS 正在执行 - 若需确保样式在首屏前生效，可配合
preload脚本 +document.styleSheets检查，但insertCSS本身不支持阻塞式注入 - Electron 14+ 中，
dom-ready已比旧版本更可靠；低于此版本建议加setTimeout(..., 0)微任务兜底
insertCSS 的参数和作用域限制
insertCSS 接收一个字符串参数，内容为纯 CSS 文本（不支持 @import、外部 URL 或 CSS Modules），且注入后作用域仅限于 webview 加载的页面，不影响主窗口或其他 webview。
容易踩的坑：
- 忘记加
!important：目标页面已有高优先级样式（如内联 style 或带 id 的规则）时，你的 CSS 可能被覆盖 - 使用相对路径或
url()引用字体/图片：insertCSS不解析资源路径，所有url(...)会被视为无效，应改用 base64 内联或预加载资源 - 传入带 BOM 的字符串（如 UTF-8 with BOM 的 .css 文件读取结果）：会导致解析失败，建议用
String.trim()清理
示例（安全写法）：
webview.insertCSS(`
#header { background: #ff6b6b !important; }
.btn { border-radius: 4px !important; }
body::before {
content: "Injected";
position: fixed;
top: 10px;
right: 10px;
background: #333;
color: white;
padding: 4px 8px;
font-size: 12px;
}
`)
为什么 insertCSS 有时对 Shadow DOM 无效
当目标页面使用 Shadow DOM（比如自定义元素内部封装了 DOM），insertCSS 注入的样式默认作用于 light DOM，无法穿透到 shadow root 内部。
解决方式有限且需谨慎：
- 若能控制目标页面，推荐在 shadow root 中显式添加
<style></style>标签（通过executeJavaScript注入） - 使用
::part()或::theme()（仅 Chromium 支持，Electron 版本需 ≥ 22）配合组件暴露的 part 名称 - 避免依赖
insertCSS修改第三方 Shadow DOM，因其结构不稳定，易随版本更新失效
典型失败场景：试图用 insertCSS 修改 Polymer 或 Lit 元素内部按钮颜色，结果完全没反应。
insertCSS 和 preload 脚本的协作边界
insertCSS 和 preload 是两类独立机制：前者注入样式，后者注入可执行 JS 环境（含 Node API）。它们可以共存，但不能互相替代。
关键区别：
-
preload脚本运行在隔离环境，可调用ipcRenderer，但无法直接操作访客页面 DOM（除非通过executeJavaScript） -
insertCSS无执行权限，纯样式层，不触发重排/重绘以外的副作用 - 不要在 preload 中调用
insertCSS：preload 运行时 webview 实例尚未 ready，this上没有insertCSS方法
正确协作模式：preload 脚本监听自身 DOM 就绪后，通过 ipcRenderer.sendToHost 通知渲染进程，再由渲染进程调用 webview.insertCSS。
复杂点在于：跨进程通信延迟 + DOM 就绪时机判断，实际项目中建议统一收口到渲染进程的 dom-ready 监听器里处理样式和脚本注入，避免分散控制流。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
