VueJS插槽不适用于Stencil JS组件

Question

我有一个Vue 3应用程序和一个StencilJS组件库。我的一个Stencil组件早些时候使用了默认槽，它与Vue配合得很好。现在，我在我的Stencil组件中引入了命名槽，但命名槽不再在Vue中工作。我知道slot属性是不推荐使用的，所以我尝试了这个：

<template v-slot:body>
//content to go inside Stencil component body slot
</template>

然而，它是空白的，因为没有任何内容被渲染。现在，我使用旧的方式添加插槽，添加Eslint禁用如下：

<!-- eslint-disable-next-line  vue/no-deprecated-slot-attribute -->
<div slot="body">
//content to go inside Stencil component body slot
</div>

这是有效的，但我将不得不在任何地方添加禁用。我想用正确的方式来做。有人能告诉我怎么做吗？

Answer 1

模具文档对此有何评论：

">模具中使用的插槽是Web组件插槽，与Vue 2中使用的插槽不同。不幸的是，两者的API非常相似，您的linter可能会将两者混淆。您需要在.elintrc.js中更新lint规则才能忽略此警告：">

module.exports = {
rules: {
'vue/no-deprecated-slot-attribute': 'off',
},
};

请参阅Stencil文档：vue/no弃用的插槽属性