让Svelte在阴影dom内添加样式

如何解决让Svelte在阴影dom内添加样式

我的苗条应用程序应该在阴影元素内渲染。这可行，但是所有样式都添加到外部文档的头部。我曾尝试在shadow dom中创建HTML元素，但是样式仍添加到外部文档的开头。

有什么办法告诉svelte在哪里添加样式？在我的用例中，不能将样式保存在外部文件中。

图像显示的是外部头部的样式，而阴影根中则没有样式。

周围工作

作为一种变通办法，我知道将侦听器添加到文档头，然后将添加到影子根的内容移动。这在我的应用程序中有效，当时的应用程序中只有一个影子域，但这不是通用解决方案。

const outerHead = document.getElementsByTagName('head')[0]
const config = { attributes: false,childList: true,subtree: false }
const callback = function (mutationsList,observer) {
mutationsList.forEach(mutation => {
     mutation.addednodes.forEach(n => shadowHtml.getElementsByTagName('head')[0].appendChild(n))
     })
}
const headobserver = new MutationObserver(callback);
headobserver.observe(outerHead,config);