Слоты VueJS не работают с компонентами Stencil JS?

Question

У меня есть приложение Vue 3 и библиотека компонентов StencilJS. Один из моих компонентов Stencil ранее использовал слот по умолчанию, и он хорошо работал с Vue. Теперь я ввел именованные слоты в свой компонент Stencil, но именованные слоты больше не работают из Vue. Я знаю, что атрибут слота устарел, поэтому я попробовал это:

      <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

Что говорят об этом документы Stencil:

« Слоты, используемые в Stencil, — это слоты веб-компонентов, которые отличаются от слотов, используемых в Vue 2. К сожалению, API для обоих очень похожи, и ваш линтер, вероятно, их путает. Вам нужно будет обновить свой lint в .eslintrc.js, чтобы игнорировать это предупреждение: "

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

См. документацию по трафарету: vue/no-deprecated-slot-attribute.