CSS插件开发中动态引入样式方法

在CSS插件开发中，动态插入`

为什么不能直接用 link 标签引入插件样式

插件要能被任意页面加载，link 依赖 HTML 结构和路径，一旦用户页面没放 、路径写错、或用了 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 注入无法原生支持