应动态插入 style 节点而非 link 标签，因其绕过 HTML 结构、路径和 CSP 限制，支持作用域隔离与执行时机控制；需检查重复插入、使用 data-plugin-style 标记、避免 innerHTML 拼接，并在插件销毁时卸载样式。
为什么不能直接用 link 标签引入插件样式
插件要能被任意页面加载，link 依赖 HTML 结构和路径，一旦用户页面没放 <head>、路径写错、或用了 CSP 策略禁止外链，样式就失效。动态插入 style 节点绕过这些限制，执行时机可控，且样式作用域可隔离。
常见错误现象：
– 插件 UI 完全无样式，控制台没报错但元素没渲染效果
– 样式被页面全局 CSS 覆盖（比如 .btn 冲突）
– 多次加载插件时重复插入相同样式，造成冗余甚至优先级混乱
- 务必在插件初始化函数内插入，避免提前执行（DOM 还没 ready）
- 插入前先检查是否已存在同名
style节点（可用data-plugin-style属性标记） - 推荐用
document.head.appendChild()，不要用innerHTML拼接，防止 XSS 和解析异常
如何用 JS 创建并注入 style 节点
核心就是创建 style 元素、填入 CSS 文本、挂载到 head。不依赖构建工具时，这是最轻量、兼容性最好的方式（IE9+ 都支持）。
使用场景：
– 纯 JS 插件（如一个弹窗组件、表单校验提示）
– 需要运行时根据配置生成样式（比如主题色动态变更）
– 避免打包时把 CSS 提取成单独文件（简化部署）
立即学习 “ 前端免费学习笔记（深入）”；
- 用
document.createElement('style')创建节点，别用style = {}对象模拟 - CSS 字符串里慎用单引号嵌套——如果样式含
content: "′"，建议统一用双引号包裹字符串，内部用转义 - 若样式含大量选择器，考虑加前缀（如
.my-plugin-modal），避免污染全局命名空间
const style = document.createElement('style'); style.setAttribute('data-plugin-style', 'my-modal'); style.textContent = `.my-plugin-modal {position: fixed; z-index: 9999;}`; document.head.appendChild(style); insertRule 适合什么情况？什么时候该避免
insertRule 是对已存在 style 节点追加规则的方法，不是创建新节点的替代方案。它适合运行时按需启用 / 禁用某组样式（比如暗黑模式切换），但不适合首次注入整套样式。
性能影响：
– 频繁调用 insertRule（尤其在循环里）会触发多次样式重计算，比一次性写入 textContent 慢
– 在 Firefox 中，超过 200 条规则后性能明显下降
- 只在已有
style节点上用，别对document.styleSheets[0]这类不确定来源的 sheet 操作 - 注意规则索引：插入位置不对可能导致预期外的层叠顺序（比如想覆盖却插到了最前面）
- IE 不支持
insertRule的第二个参数（index），必须传0或省略，否则报错Invalid argument
CSS 变量和 scoped 逻辑怎么配合 JS 注入
纯 JS 注入无法原生支持 <style scoped>，但可以用属性选择器 + 唯一 ID 模拟作用域。CSS 变量则必须确保注入时机早于任何用到它的 JS 计算（比如 getComputedStyle）。
容易踩的坑：
– 把 CSS 变量定义写在 :root 下，结果被页面其他样式覆盖（优先级不够）
– 动态设置变量值后忘记触发重绘（部分浏览器需要 offsetHeight 强制回流）
- 变量定义建议放在插件专属选择器下，如
.my-plugin-root {--primary-color: #007bff;} - 注入后立刻读取变量值？加个
requestAnimationFrame确保样式已生效 - 避免用
!important声明变量值——它不生效，CSS 变量本身不支持!important
实际项目里最常被忽略的是样式卸载逻辑：插件销毁时，得主动移除对应的 style 节点，否则残留的 CSS 可能在后续页面中意外生效，尤其是 SPA 场景下反复加载同一插件。
