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

我想做的:

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

现在如何进行序列化

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

的

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

.a > .b {
color: red
}

它们被序列化成

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

这不是一个有效的CSS，因此不能被正确解析。

大号问题是我观察到的唯一一个问题，但它使我想知道其他潜在的序列化问题。

如何以不破坏其中的CSS的方式序列化样式节点?

因此，这似乎与在新文档上动态创建样式节点有关。

最简单的复制方法如下:

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>

看起来，作为主动呈现文档的一部分，或者只是通常被添加到文档中，而不仅仅是使用它创建，对样式节点有一些副作用，这导致它被正确序列化。所以现在我用下面的方法来代替，这有点难看，但是可以工作:

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>

现在这解决了我的问题，但我仍然很想了解这里发生了什么更详细地说(例如，副作用究竟是什么，以及它是如何/何时触发的)，所以我希望对此发表评论!

相关内容

最新更新

热门标签：