CSS in custom element

[jbmolle]

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

[07akioni]

I think it would increase performance overhead. Since naive use id to check if component style exists. If every element has it's scope style, i think this may be a large overhead?

[07akioni]

Since style need to be generated one time for every component.

[jbmolle]

Well it doesn't have to be in each component. The logic is more or less the same as of now but it would not be the in the document.head.
Right now I have a component with a template like this one:

<template lang="pug">
div(ref="root")
  n-button(@click="test") Test Button
  n-form
    n-form-item(label="Comment")
      n-input(v-model:value="comment")
</template>

And to solve the problem I do the following in onMounted:

const root = ref()
onMounted(() => {
  const cssrIds = ['vueuc\\/binder',  'nBaseIcon', 'nInput', 'nFormItem', 'nForm', 'nBaseWave', 'naive-ui\\/global', 'nButton']
  const selectors = cssrIds.map(id => `style[cssr-id=${id}]`).join(',')
  const styleSheets = document.querySelectorAll(selectors)
  let innerHTML = ''
  for (let i = 0; i < styleSheets.length; i++) {
    innerHTML += styleSheets[i].innerHTML
  }
  const shadowRoot = root.value.getRootNode()
  const styleElement = document.createElement('style')
  styleElement.innerHTML = innerHTML
  shadowRoot.appendChild(styleElement)
})

So the style is not included in every button but only once in the whole component.

The idea would be to specify where the style tag is included in useTheme.
So in Button.tsx, I would have:

useTheme(
  'Button',
  'Button',
   style,
   buttonLight,
   props,
   mergedClsPrefixRef,
   nodeToInsertIn
 )

If nodeToInsertIn is null then I use document.head. But I could pass for example selfEl.getRootNode() for a custom element and the <style cssr-id=nButton></style>would be included in my shadow root (just once for all buttons in this shadow root because it still checks the cssr-id). So per default it wouldn't be different as it is now. It would just give more control for specific use cases like custom elements / web components.
Maybe it can be a property of NConfigProvider so I can put the node where the style tag has to be inserted once in NConfigProvider.

[07akioni]

Thanks for your reply, I'm gonna to fix the problem in later version.

[jbmolle]

Great, thanks!
I can try to implement the solution and create a pull request if it helps.
Best

[TechAkayy]

I have a similar problem when I try mounting a vue app inside an iframe. Has there been a solution for this? Thank you!

[sazid18]

@jbmolle @07akioni It might cause issue if the naive UI version is conflicting in the consumer application.

Let say an application consumes a web component which internally using naive UI. Also the consumer application uses naive UI but with different version. This might cause problem if different version of naive UI has different css style.

what's your thoughts in this ?

[0604hx]

使用最新版本（2.38.1），配合 vue 的 defineCustomElement 基于 SFC 构建 WebComponents，样式丢失，请问有什么解决方案吗？