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.

[EranGrin]

Hi Leo, it is indeed a pity that they don't provide support for vue app as web component. I would be glad to help you, but unfortunately, I would need to reproduce the problem in order to find the solution as it sounds like you have quite a complex use case.

It appears that this is a CSS scoping issue, but I believe it would be necessary to have a simplified version of your use case in order to proceed.

Thanks

[leolazz]

Apologies for the delayed response. I had other sprint duties to attend to.

I have created a repo which minimally reproduces the issue. Additonally, using custompatch I have added changes to resolve the issue.

To use this patch please npm install custompatch -g prior to installing the dependencies. Then you can run npm run build-only & npm run dev

https://stackblitz.com/~/github.com/leolazz/vue3-web-component-wrapper-demo

Please let me know if you have any questions.

Thanks, Leo

[EranGrin]

Hi Leo, I was reviewing your code and even though I'm not sure I was able to reproduce your issue, I did found something that might cause the problem. I wrote it in the main.ts of the vite example, but maybe I should add it to the docs as well

// ?inline can not handle import url() in css therefore fonts are not loaded, workaround is to add font css to the App.vue
import style from './style.css?inline'

Means if you want to add the style.css that contains import then you should make an inline import in the App.ts.

If this still doesn't solve the issue I'll check it again in the coming days

[EranGrin]

Hi Leo, If the issue still persists, it would be helpful for me to understand whether the missing styles originate from AG-Grid or from Element-Plus. Could you provide further details?

[leolazz]

Hey Eran,

Apologies, you're right it does look like I did forget to add that into the reproduction repo I provided. Although, it is included in the original repo and does not resolve the issue.

For the most part the missing styles originate from Element-Plus. Although, as I recall I have seen certain ag-grid styles such as icons be dropped.

[EranGrin]

Now that we have isolated the issue to be styles from Element-Plus, I would be interested in debugging it. It might take me a few days to find time for it.

[EranGrin]

Hi @leolazz, I could finally find time to review the issue, and it was quite interesting indeed. The Element plus lib uses CSS var and sets it to :root which the shadow DOM doesn't have access to as they are exposed to the global scope only, this might be the issue with other libs or frameworks that use CSS var as well. Therefore, I added a bugfix to replace all :root with :host which should solve the issue for all such use cases.

I would suggest using the style.css and there @import style-that-should-be-injected-to-shadow-dom.css you can add multiple files as well, they will all be inline with vite.

You can check the new version and let me know if the issue is resolved

[leolazz]

Hey @EranGrin ,

Thanks again for taking the time to look over the issue.

I removed the patch I had made, then updated the package to version 1.4.1. Unfortunately, I am still missing styles. I don't see any of the css vars in the style tags of the WC. I was sure to add every css file I saw referenced when building the app normally as a non WC.

Let me know if there something else I should test.

Thanks

[EranGrin]

Hi @leolazz I did some checks and created a test project https://stackblitz.com/~/github.com/EranGrin/element-plus-unocss-web-component

I also added some docs https://erangrin.github.io/vue-web-component-wrapper/element-plus.html

It may not be perfect, but it might be a starting point for further improvement.

[EranGrin]

@leolazz not sure if ever had time to review the solution, but I would like to close the issue if we don't have here any movement