`cssFrameworkStyles` are outputted lower in the shadowDOM tree than component styles

[MarcHartwig13]

When using the shadowDOM and cssFrameworkStyles the <style> tag for the cssFrameworkStyles is added to the DOM tree first. Then the styles from the component is added to the DOM second but right above the cssFrameworkStyles higher in the DOM.

This causes the cssFrameworkStyles to potentially override the component styles. Because cssFrameworkStyles should be more global styles I believe it should be the other way around and component styles should be further down the DOM so they override cssFrameworkStyles

Here is a recreation: https://stackblitz.com/edit/vitejs-vite-gakyc1kn?file=src%2Fmain.ts In this example I would expect the "HELLO WORLD" H1 tag to be blue and not red

And I believe this is where the change would need to be made: https://github.com/EranGrin/vue-web-component-wrapper/blob/main/package/src/web-component-util.js#L92

[EranGrin]

Hi there, You are more than welcome to open a PR; it seems like a valid issue. I should have time next week to review and work on this project.

[MarcHartwig13]

Hi, yup I'll work on getting a PR up for the fix, hopefully by this weekend

[MarcHartwig13]

@EranGrin here is a PR to resolve the styling issue: https://github.com/EranGrin/vue-web-component-wrapper/pulls

but I did notice another issue, the styles are outputted twice. I go into more detail in the PR description

[EranGrin]

I'm quite busy with other projects currently; I hope I can find time for this project in the coming days.