vue web components - after passing in vue component wrapped with h, the style is lost. How to solve this problem?

[q479902964]

example：
button.ce.vue：

<template>
    <component :is="props.componentRender" text="btn" />
</template>

index.vue：

import { ElButton } from 'element-plus'
const componentRender = ({ text }): VNode[] => [
          h(
              ElButton,
              {
                  type: 'primary',
              },
              text,
          )
]
<wb-button .componentRender={componentRender}  />

expect：
after passing in vue component wrapped with h, the style is lost.
In addition to injecting styles into web components, is there any other solution? Because the incoming component styles are uncontrollable, the method of injecting styles is not very scientific.

[LinusBorg]

Taking a step back from the specific problem:

It seems to me like you are turning a Vue component into web component that can then only be used in a Vue app, or requires the developer to write or use other Vue components to define componentRender.

Then why a web component in the first place?

[q479902964]

Because I want to write the same web component for use by vue3, react and vue2 frameworks, but I have been stumped during the use of vue3 framework.

[q479902964]

Because scoped slot cannot be used, I use this method, but this method also has its disadvantages.

[q479902964]

can you help me? thanks!

[kota-yata]

One of the breaking changes from Vue2 to Vue3 is that components are wrapped with div when imported at its root page. your problem seems to relate with this change