元素中正确显示？
" />
本文详解为何通过 CSSStyleSheet.insertRule() 添加的规则不会自动反映在 <style> 元素的 innerHTML 中，并提供可靠、符合标准的解决方案，确保 @font-face 等规则可被浏览器识别且元素内容可查。
本文详解为何通过 `cssstylesheet.insertrule()` 添加的规则不会自动反映在 `
在 JavaScript 中动态注入 CSS 规则时，开发者常误以为调用 sheet.insertRule(rule) 后，对应的 <style> 元素的 HTML 内容（如 innerHTML 或序列化后的 DOM 字符串）会自动更新。但事实并非如此：insertRule() 直接操作底层 CSSStyleSheet 对象，而 <style> 元素本身并不同步回写其文本内容。因此，即使 console.log(sheet) 显示规则已存在、字体也能正常加载，console.log(styleElement) 仍显示空标签 <style></style> —— 这是预期行为，而非 bug。
✅ 正确理解：<style> 元素与它的 sheet 是单向绑定关系——元素初始化时将内容解析为样式表，但后续对 sheet 的修改不会反向同步到元素的文本节点或 innerHTML。浏览器仅依赖 sheet 执行样式计算和渲染，无需 DOM 回写。
✅ 推荐解决方案：显式设置 textContent
若需确保 <style> 元素在 DOM 中“可见”该规则（例如用于调试、SSR 模拟或第三方工具扫描），应手动将规则写入元素文本内容：
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}') format('woff2');
}`;
// ✅ 关键：先插入规则（确保样式生效）
sheet.insertRule(rule, 0);
// ✅ 补充：同步写入 textContent（使元素内容可读、可序列化）
styleElement.textContent = rule;⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- insertRule(rule, index) 的第二个参数 index 建议显式传入（如 0），避免在多规则场景下因索引越界抛错；
- 不要使用 styleElement.innerHTML = rule，因 <style> 是raw text element，innerHTML 会被忽略，必须使用 textContent 或 innerText（推荐 textContent，性能更好且无 HTML 解析开销）；
- 若需插入多条规则，可累积字符串后一次性赋值 textContent，或多次调用 insertRule() + 最终覆盖 textContent（注意顺序一致性）；
- @font-face 规则对插入时机敏感，建议在 document.head 已就绪后执行（如 DOMContentLoaded 或直接在 <head> 脚本中）。
✅ 验证是否生效
可通过以下方式确认规则已正确应用：
// 检查 sheet 是否包含规则
console.log(sheet.cssRules.length); // 应输出 1
// 检查字体是否可被 computedStyle 使用（需在实际文本节点上测试）
const testEl = document.createElement('div');
testEl.style.fontFamily = `'${fontIdentifier}'`;
document.body.appendChild(testEl);
console.log(getComputedStyle(testEl).fontFamily); // 可能返回 fallback 名称，但字体文件会加载
// 查看 style 元素内容（现在非空！）
console.log(styleElement.outerHTML);
// → <style>@font-face { font-family: 'CustomIconFont'; src: url('/fonts/icon.woff2') format('woff2'); }</style>总之，insertRule() 与 textContent 并非互斥，而是协同：前者驱动样式引擎，后者保障 DOM 可见性与可维护性。掌握这一机制，即可稳健实现动态字体注入、主题切换、CSS-in-JS 等高级用例。
