为何向空style标签用insertRule添加的规则会因重置textContent被移除？

问题场景与代码示例 #

复现问题的代码

var styletag = document.createElement("style"); 
document.head.appendChild(styletag);
styletag.appendChild(document.createTextNode('')); // 此代码是复现问题必需的
styletag.sheet.insertRule("#inner {  background-color: red;} ");
setTimeout(()=>styletag.textContent='',1000)

<span id="inner">content</span>

这段代码会先给#inner添加红色背景，1秒后执行styletag.textContent=''，样式表规则（styletag.sheet.cssRules）变为空，背景色也随之消失。

对比代码（无空文本节点）

var styletag = document.createElement("style"); 
document.head.appendChild(styletag);
// styletag.appendChild(document.createTextNode('')); // 注释掉该行
styletag.sheet.insertRule("#inner {  background-color: red;} ");
setTimeout(()=>styletag.textContent='',1000)

<span id="inner">content</span>

此时执行styletag.textContent=''后，样式表规则不会消失，#inner的红色背景依然存在。

原因解释 #

1. textContent的核心行为
   设置textContent会完全清空<style>标签的所有子节点，再将新内容作为文本节点插入。这个操作必然触发浏览器重新解析<style>标签的内容，重置或重建对应的样式表对象。

2. 样式表与标签文本的两种绑定状态

• 无初始文本节点时：通过sheet.insertRule添加的规则属于「动态独立规则」，浏览器不会将这些规则同步回<style>标签的文本内容里。此时<style>标签的文本和样式表是分离状态，清空文本只会修改标签内容，不会影响已经通过API添加到样式表的规则。
• 有初始文本节点时（哪怕是空文本）：浏览器会将<style>标签的文本内容认定为样式表的「权威来源」，此时通过sheet.insertRule添加的规则会被同步写入到标签的文本内容中。当设置textContent=''清空文本后，浏览器会基于空内容重新生成样式表，自然就移除了所有规则。

简单来说，空文本节点的存在，强制浏览器把样式表和<style>标签的文本内容绑定成了「同步联动」的关系，修改文本就等于直接修改样式表。

内容的提问来源于stack exchange，提问作者Kritidipto Ghosh