使用 CSS 序列化和反序列化 HTML 样式标签

Question

我想做什么：

Save/copy HTML 片段在一个地方，将其粘贴到另一个地方并将其反序列化为类似的 DOM

现在怎么连载

在容器元素上调用 element.outerHTML
- 我也试过使用 new XMLSerializer().serializeToString(element) 得到相同的结果

问题

当我序列化包含 css 的 style 节点时：

.a > .b {
  color: red
}

他们实际上像

一样被序列化了

.a &gt; .b {
  color: red
}

这不是有效的 CSS，因此无法正确解析。

符号更大的问题是我观察到的唯一问题，但这让我想知道其他潜在的序列化问题。

问题：如何以不破坏 CSS 的方式序列化样式节点？

Answer 1

看来这与在新文档上动态创建样式节点有关。

最简单的复现如下：

const doc = new Document()

const style = doc.createElement('style')
style.textContent = '.a>.b { color: red; }'

console.log(style.outerHTML)

产生 <style>.a>.b {color:red}</style>

似乎作为主动渲染的一部分 document/or 只是通常被添加到文档中而不只是使用它创建在样式节点上有一些 side-effect，这导致它被正确序列化尽管。所以现在我改为执行以下操作作为解决方法，这有点难看但有效：

const doc = new DOMParser().parseFromString('<html><head></head><body></body></html>', 'text/html')


const style = doc.createElement('style')
style.textContent = '.a>.b { color: red; }'

doc.body.append(style)

console.log(style.outerHTML)

doc.body.removeChild(style)

这会产生一个适当的序列化 <style>.a>.b { color: red; }</style>

现在这解决了我的问题，但我仍然很想更详细地了解这里发生了什么（例如 side-effect 到底是什么 how/when 是否被触发），因此希望对此发表评论！

使用 CSS 序列化和反序列化 HTML 样式标签

Serialized and deserialize HTML style tag with CSS

javascript

html

css

serialization

deserialization