Have Svelte add the style inside a shadow dom

My svelte app is supposed to render inside a shadow element. This works, but all the styles are added to the head of the outer document. I've tried creating an HTML element in the shadow dom, but the styles are still added to the head of the outer document.

Is there any way to tell Svelte where to add the styles? Having the styles in an external file is not an option in my use case.

The image shows the style in the outer head and no style within the shadow-root.

Work-Around

As a work-around I know add a listener to the document-head and move what gets added to the shadow-root. This works in my application where there's only one shadow-dom at the time, but it's not a generic solution.

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);