Question

我在节点中异步呈现带有rapscallion的模板服务器端。在渲染主体时，我有一个需要插入文档头的字符串（包含换行符）：

// this is what I have serverside
var stylestring = `<style type="text/css" data-style="some-id-that needs to be preserved">
.lfwARz {
  margin-bottom: 0;
  margin-top: 0;
}
</style>`

由于此时我已经将<head>发送到客户端，我需要插入一个脚本，将这些样式设置到客户端。但是我无法让它发挥作用。

这种方法有效：

// gets run clientside
<script>
  var style = document.createElement('style')
  style.type = 'text/css'
  style.innerHTML = '${() => sheet.getStyleTags().replace(/(\r\n|\n|\r)/gm, '').replace(/<\/?style.*?>/g, '')}'
  document.head.appendChild(style)
</script>

但是它会导致数据属性丢失（我需要保留这些属性，以便样式不会在客户端上重新呈现）。

Answer 1

使用document.createElement('div')然后将字符串插入其中，从该片段中获取DOM，以便可以使用<head>将其插入appendChild：

var fragment = document.createElement('div');
// remove newlines from the string and insert it in the fragment
fragment.innerHTML = the_style_string.replace(/(\r\n|\n|\r)/gm, '');
document.head.appendChild(fragment.firstChild);

如何将包含样式标记的字符串原样附加到带有vanilla js的文档头？

1 个答案: