Styles are not applied / found inconsistently depending on location of style tag

[leolazz]

First off, thanks for the work put in to support this package. It's unfortunate that is still necessary as the Vue team is not providing proper web component functionality in Vue 3 to this day.

Description:

I have a Vue 3 / vite project using Ag-Grid and the Element-Plus component library. Additionally, I am using unpluggin auto import, components, and icons. I am using the element plus resolver for both the components and auto import. For the styles I import the respective libraries needed styles into a .css file and do an inline import of this file into the web component wrapper as shown in the example.

The issue I have is that various styles aren't picked up and roll back to user agent stylesheet defaults or ones set by the parent of the web component. Many or all of them are set by CSS variables. I can see that they do exist within the style tag attached inside the shadow root.

Strangely if I append the same style tag to the web component root they are picked up. However, if I then remove the style tag from prepended to the shadow root all the styles that are not set within components individual style tags are lost.

I am at a loss as to why some styles are picked up and others are not depending on the location of the style tag. there is likely something obvious that I am not aware of with how this all functions.

I apologize for not providing links to example code, but this is not from a personal project so it's a bit difficult. So, if there is any clarification I can provide please let me know.