CSS in custom element

[07akioni]

Discussed in #2301

^{Originally posted by jbmolle January 27, 2022}
Hi,

I'm trying to create a custom element from a Vue component with Vue 3 function defineCustomElement.
Let say the component is just a NaiveUI Button.

The problem is that in a Vue app NButton works perfectly but in a custom element there is no CSS style applied.
Actually NButton uses useTheme which renders the CSS classes with css-render. useTheme uses style.mount which calls document.head.appendChild or document.head.insertBefore. So we get inline stylesheets in the head of the page. The problem with Vue3 custom elements is that a shadow root is automatically inserted and so everything inside the custom element doesn't have access to the stylesheets in head.
Would it be possible to add a custom variable to mount.ts with the dom element where the style should be inserted. So per default it would include to document.head but if we give a specific element, it would insert it in a style tag in the shadow root.

Let me know what you think and if you see another solution.
Thanks,
JB

[robinsimonklein]

Hi there, any news about this ?
I'm also trying to create a little devtools isolated in a custom element, with vue's defineCustomElement and planning to use Naive UI inside