javascript - 为什么StyleSheet 的ownerNode 插入后为null？

Question

有人可以解释为什么在我将其 textContent 设置为某项后，StyleSheet 的 ownerNode 为 null 吗？

const style = document.createElement('style')
document.head.appendChild(style)
const sheet = style.sheet
// passes
console.assert(sheet.ownerNode !== null, 'ownerNode is null')
sheet.ownerNode.textContent = 'div { color: red }'
// fails
console.assert(sheet.ownerNode !== null, 'ownerNode is null')

Answer 1

因为通过完全替换节点的文本，您创建了一个新的替换样式表对象:

const style = document.createElement('style')
document.head.appendChild(style)
const sheet = style.sheet
sheet.ownerNode.textContent = 'div { color: red }'
console.log(style.sheet === sheet);           // <===== false!
console.log(style.sheet.ownerNode === style); // <===== true

旧节点不再存在于 DOM 中，因此它没有 ownerNode。