Conflicts of custom elements' named slot (defineCustomElement)

[rhzone]

Link to minimal reproduction

edit/vitejs-vite-sxhlbh?file=src/App.vue

custom-element below is a web component

This snippets working as expected, but eslint complaint about it

error slot attributes are deprecated vue/no-deprecated-slot-attribute

<custom-element>
  <span slot="icon">hello, world</span>
</custom-element>

Below snippets trigger compiler error

Codegen node is missing for element/if/for node. Apply appropriate transforms first.

<custom-element>
  <template #icon>
    <span>hello, world</span>
  </template>
</custom-element>

[palamarchukser]

[rhzone]

custom-element is a web component wrapped with vue defineCustomElement @palamarchukser

[rhzone]

It doesn't matter, this my fault. I will provide a full reproduction link about one half hour later. Thank you for your kind reply. @palamarchukser

[rhzone]

I have updated the reproduction code. @palamarchukser

[LinusBorg]

The first way (with a slot="icon" prop) is the correct way, as documented here:

https://vuejs.org/guide/extras/web-components.html#slots

So a workaround would be to skip this rule in these instances:

<custom-element>
  <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
  <span slot="icon">hello, world</span>
</custom-element>

You can also open an issue in the eslint plugin repo and ask for a fix / feature to skip this rule for custom elements.