How do I use slots from a Vue2 webcomponent in Vue3? - vue.js

Question

The component I am trying to use is written in Vue2 and is installed through NPM as a webcomponent. My new project is created in Vue3.
I'm trying to use a components slots, but it's not working.
When I try the following I get no errors, but nothing is rendered inside the slots of the webcomponent:
<my-webcomponent-with-two-slots>
<main>
<div>Hello World</div>
</main>
<sidebar>
<div>Hello World</div>
</sidebar>
</my-webcomponent-with-two-slots>
When I try the following I get an error: error 'slot' attributes are deprecated vue/no-deprecated-slot-attribute
<my-webcomponent-with-two-slots>
<div slot="main">
<div>Hello World</div>
</div>
<div slot="sidebar">
<div>Hello World</div>
</div>
</my-webcomponent-with-two-slots>
I cannot change or upgrade the webcomponent I want to use. How do I use it in my Vue3 project?
EDIT: I should clarify that the webcomponent is working using an older project written in Vue2, using the second example.

Answer 1

Vue is complaining about the older slot attribute that has been changed to v-slot. But you're not using vue slots, you're using WebComponent's native slot attribute. So you can safely disable this check in your .eslintrc.js file by adding
rules: {
'vue/no-deprecated-slot-attribute': 'off',
}
to your rules to globally disable this rule.
Or if you'd like to disable it for a single line, add this before the line:
<!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
<div slot="main">
<div>Hello World</div>
</div>
<!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
<div slot="sidebar">
<div>Hello World</div>
</div>