`vue/no-deprecated-slot-attribute` conflicts with web component named slots

[raoufswe]

Checklist

• [x] I have tried restarting my IDE and the issue persists.
• [x] I have read the FAQ and my problem is not listed.

Tell us about your environment

• ESLint version: v9
• eslint-plugin-vue version: v10.0.0
• Vue version: v3
• Node version: v20
• Operating System: Mac OS

Please show your full configuration:

import pluginVue from 'eslint-plugin-vue'
import globals from 'globals'

export default [
  // add more generic rulesets here, such as:
  // js.configs.recommended,
  ...pluginVue.configs['flat/recommended'],
  // ...pluginVue.configs['flat/vue2-recommended'], // Use this if you are using Vue.js 2.x.
  {
    rules: {
      // override/add rules settings here, such as:
      // 'vue/no-unused-vars': 'error'
    },
    languageOptions: {
      sourceType: 'module',
      globals: {
        ...globals.browser
      }
    }
  }
]

What did you do?

 // my-element is a custom element / web component. 
<my-element>
  <div slot="named">hello</div>
</my-element>

What did you expect to happen?

Vue has a documented limitation when using named slots with web components. If a web component that accepts a named slot is used in a Vue app, the vue/no-deprecated-slot-attribute linting rule conflicts with this behavior.

When passing named slots, use the slot attribute instead of the v-slot directive.

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

What actually happened?

Since we must use the native slot attribute when working with named slots in web components and vue, consumers will encounter the following linting error unless it is explicitly disabled:

  11:22  error    `slot` attributes are deprecated vue/no-deprecated-slot-attribute

Repository to reproduce this issue

The issue can be reproduced in this nuxt@3 example

To see the lint error:

Navigate to the nuxt-app directory:

cd nuxt-app

Run the following command and you should be able to see the error:

yarn dlx eslint ./pages/components/button.vue