元素中正确显示
" />
动态创建 <style> 元素后调用 insertRule() 添加 @font-face 等规则，虽能成功写入 CSSStyleSheet 对象，但元素内容仍为空；本文详解其原理、正确实践及关键注意事项。
动态创建 `
在 Web 开发中，通过 JavaScript 动态注入样式（尤其是 @font-face、媒体查询或主题变量）是一种常见需求。然而，开发者常遇到如下现象：
const styleElement = document.createElement('style');
document.head.appendChild(styleElement);
const sheet = styleElement.sheet;
const fontIdentifier = 'CustomIconFont';
const font = { url: '/fonts/icon.woff2' };
const rule = `@font-face {
font-family: '${fontIdentifier}';
src: url('${font.url}');
}`;
sheet.insertRule(rule); // ✅ 成功插入到 sheet.rules 中
console.log(sheet.cssRules.length); // → 1
console.log(styleElement.innerHTML); // → ""（空字符串）
console.log(styleElement.textContent); // → ""（仍为空）这是预期行为，而非 Bug。
<style> 元素的 innerHTML / textContent 不会自动同步 CSSStyleSheet.insertRule() 的变更。浏览器将 <style> 元素与其关联的 CSSStyleSheet 对象分离管理：前者仅负责初始解析时的源文本，后者才是运行时样式计算的真实来源。因此，insertRule() 直接操作底层样式表对象，绕过了 DOM 文本层。
✅ 正确做法是：无需关心 styleElement 是否“可见”内容，只要 sheet.insertRule() 成功，样式即已生效。
验证方式应为：
- 检查 sheet.cssRules 长度或遍历规则；
- 在 DevTools 的 Elements 面板中展开 <style> 元素，查看其 sheet 属性（Chrome/Firefox 均支持点击跳转至样式表视图）；
- 实际应用字体（如设置 font-family: CustomIconFont 的元素是否正常渲染）。
⚠️ 注意事项：
- insertRule() 的语法必须严格符合 CSS 规范，否则抛出 SyntaxError（例如 @font-face 中缺少 font-family 或 src）；
- @import 和 @charset 规则有插入位置限制（须在所有其他规则前），而 @font-face 可任意插入；
- 若需调试可见源码，可手动同步（不推荐用于生产）：
styleElement.textContent = rule; // 仅覆盖，不追加；且会丢失已有规则
更安全的同步方式是维护规则列表并重写 textContent，但违背了 CSSStyleSheet 的设计初衷。
立即学习“前端免费学习笔记（深入）”；
? 总结：
<style> 元素与 CSSStyleSheet 是“一对多”关系（一个元素对应一个 sheet，但一个 sheet 可来自 <style>、<link> 或 document.styleSheets），insertRule() 操作的是 sheet 实例本身。只要 sheet.insertRule(rule) 不抛错，规则即已注册并参与样式计算——DOM 文本内容是否显示，不影响功能正确性。 这是现代 CSSOM 的标准行为，也是性能优化的设计选择。
