bug: Styles not rendered, gone from the DOM due to 3rd party framework interference (svelte/sveltekit) #6637
Description
Prerequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing issues that already report this problem, without success.
Stencil Version
4.22.2
Current Behavior
When having a component, that's having styles that are not scoped and component is not-shadow-dom:
@Component({
tag: 'foobar',
scoped: false,
styleUrl: 'foobar.scss',
})
Then Stencil injects styles into <head> element after <link rel="preload"> elements which is implemented here:
https://github.com/stenciljs/core/blob/main/src/runtime/styles.ts#L117
So in my (large and complex sveltekit) application i witnessed svelte doing heavy changes within <head>, in particular removing (previously) injected nodes
The problem is that - when svelte removes nodes that it added, it doesn't verify if the nodes actually belong to svelte components, their imported modules etc, it just removes everything between 2 nodes. Including <style> nodes of our component. So stencil owned styles - are removed. They are not added back after the fact.
I believe the responsible line is here:
https://github.com/stenciljs/core/blob/main/src/runtime/styles.ts#L89
it checks if style has already been added. It's good to have this kind of check, however the check should also verify if the element exists in the DOM tree, not only if it was added to an internal list.
Expected Behavior
On component insertion, style presence should be checked in real DOM (not only in an internal list), to avoid anything external meddling with the DOM nodes.
It would be handy to configure where styles should be injected, but i don't imagine any reasonable way of doing so.
System Info
irrelevantSteps to Reproduce
I'll prepare a demo in some time and link it here.
On my end i gonna verify if setting scoped styles fixes my case (shadow dom should help, but i cant use it), and if not - will propose a fix.
Code Reproduction URL
TBD