Vue version

3.3.4

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-9p5nna?file=src%2FApp.vue

Steps to reproduce

点击Demo中的按钮即可对比

What is expected?

表现一致

What is actually happening?

Web component与Vue组件表现不一致

System Info

No response

Any additional comments?

No response

The usage of slot in Web Components is as follows slot="label".

用法错了，在 web component 中只能使用 slot="label" 这种形式。 这是文档 https://cn.vuejs.org/guide/extras/web-components.html#building-custom-elements-with-vue

The usage of slot in Web Components is as follows slot="label".

用法错了，在 web component 中只能使用 slot="label" 这种形式。 这是文档 https://cn.vuejs.org/guide/extras/web-components.html#building-custom-elements-with-vue

The usage of slot in Web Components is as follows slot="label".

用法错了，在 web component 中只能使用 slot="label" 这种形式。 这是文档 https://cn.vuejs.org/guide/extras/web-components.html#building-custom-elements-with-vue

两种写法试了下 似乎都不行

你 from-item.ce.vue 内写的有问题 isRenderSlot 是 false ，永远也不会显示 label slot 的内容

The usage of slot in Web Components is as follows slot="label".

用法错了，在 web component 中只能使用 slot="label" 这种形式。 这是文档 https://cn.vuejs.org/guide/extras/web-components.html#building-custom-elements-with-vue

两种写法试了下 似乎都不行

你 from-item.ce.vue 内写的有问题 isRenderSlot 是 false ，永远也不会显示 label slot 的内容

The usage of slot in Web Components is as follows slot="label".

用法错了，在 web component 中只能使用 slot="label" 这种形式。 这是文档 https://cn.vuejs.org/guide/extras/web-components.html#building-custom-elements-with-vue

两种写法试了下 似乎都不行

你 from-item.ce.vue 内写的有问题 isRenderSlot 是 false ，永远也不会显示 label slot 的内容

看这里

The usage of slot in Web Components is as follows slot="label".

用法错了，在 web component 中只能使用 slot="label" 这种形式。 这是文档 https://cn.vuejs.org/guide/extras/web-components.html#building-custom-elements-with-vue

两种写法试了下 似乎都不行

你 from-item.ce.vue 内写的有问题 isRenderSlot 是 false ，永远也不会显示 label slot 的内容

看这里

我们这两种写法没有区别 我想表达的重点就是 相同的代码，vue组件的表现是可以来回切换的，换成web component 表现就不符合预期了

The usage of slot in Web Components is as follows slot="label".

用法错了，在 web component 中只能使用 slot="label" 这种形式。 这是文档 https://cn.vuejs.org/guide/extras/web-components.html#building-custom-elements-with-vue

两种写法试了下 似乎都不行

你 from-item.ce.vue 内写的有问题 isRenderSlot 是 false ，永远也不会显示 label slot 的内容

看这里

我们这两种写法没有区别 我想表达的重点就是 相同的代码，vue组件的表现是可以来回切换的，换成web component 表现就不符合预期了

(⊙﹏⊙)，是我理解有误

兄弟，在组件内部有什么好的方式在宿主元素( host)上 添加属性和方法吗？ 例如：在 form-item.ce.vue 中对 wc-form-item 添加一个方法

兄弟，在组件内部有什么好的方式在宿主元素( host)上 添加属性和方法吗？ 例如：在 form-item.ce.vue 中对 wc-form-item 添加一个方法

getCurrentInstance()可以获取当前组件的实例，它有一个ctx上下文属性，ctx有$el属性直接指向了template模板的根元素，如果template有多个一级节点，$el指向的是个text。有个这个元素就可以通过getCurrentInstance().ctx.$el..parentNode.host访问host对象了

感觉好多不方便的点 最近开始调研lit了 至少目前看比vue开发体验舒服点

- <slot v-if="isRenderSlot" name="label"></slot>
- <template v-else>我是默认label</template>
+ <span v-if="isRenderSlot"><slot name="label"></slot></span>
+ <span v-else>我是默认label</span>

The usage of slot in Web Components is as follows:

<span v-if="isRenderSlot"><slot name="label"></slot></span>
<span v-else>我是默认label</span>

<span slot="label">我是外部传入的label</span>

getCurrentInstance()可以获取当前组件的实例，它有一个ctx上下文属性，ctx有$el属性直接指向了template模板的根元素，如果template有多个一级节点，$el指向的是个text。有个这个元素就可以通过getCurrentInstance().ctx.$el..parentNode.host访问host对象了

感觉好多不方便的点 最近开始调研lit了 至少目前看比vue开发体验舒服点

确实很不方便； defineExpose 的 pr 都半年了还没合并(使用 defineExpose 的导出的可以直接在 host 上使用 )还没合并； 我目前的做法是 在组件的根节点绑定一个 ref="el"，然后通过 el.value.parentNode.host 获取的；而且在界面刷新的时候，子组件会比父组件先加载，导致 在父组件使用 provide 提供的值在子组件中是 undefined。 另外我发现 stenciljs 挺不错

- <slot v-if="isRenderSlot" name="label"></slot>
- <template v-else>我是默认label</template>
+ <span v-if="isRenderSlot"><slot name="label"></slot></span>
+ <span v-else>我是默认label</span>

The usage of slot in Web Components is as follows:

<span v-if="isRenderSlot"><slot name="label"></slot></span>
<span v-else>我是默认label</span>

<span slot="label">我是外部传入的label</span>

这个确实是可以的，我本地开发就是这样规避的。 但是这样会额外增加一个标签

Duplicate of #8632 PR 8657 Demo