bug(vue/no-deprecated-slot-attribute): invalid autofix on non-immediate slot attributes

[privatenumber]

Checklist

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

Tell us about your environment

• ESLint version: 7.23.0
• eslint-plugin-vue version: 7.9.0
• Node version: v14.16.1
• Operating System: macOS 11.4

Please show your full configuration:

Sorry, partial config but the autofixes are coming from vue/no-deprecated-slot-attribute so I think this should suffice. Can provide full config if necessary.

'vue/no-deprecated-data-object-declaration': 'warn',
'vue/no-deprecated-slot-attribute': 'warn',
'vue/no-deprecated-slot-scope-attribute': 'warn',
'vue/no-deprecated-scope-attribute': 'warn',

What did you do?

Ran autofix with vue/no-deprecated-slot-attribute enabled.

It autocorrected the old slot="slot-name" to the new #slot-name syntax, but broke the code in places where the element with slot="slot-name" is not an immediate child.

With the deprecated syntax slot="slot-name", it appears that content passed into the slot can be in nested <template> tags. https://jsfiddle.net/hirokiosame/vy6hejcx/

With the new syntax #slot-name, it appears that content passed into the slot much be an immediate child of the component it's being passed into. https://jsfiddle.net/hirokiosame/njbof5rv/

SomeComponent.vue

<template>
    <div>
        <slot name="some-slot" />
    </div>
</template>

This works:

<template>
  <some-component>
    <template slot="some-slot">
      This works 1
    </template>

    <template v-if="true"> <!-- some arbitrary conditional -->
      <template slot="some-slot">
        This works 2
      </template>
    </template>
  </some-component>
</template>

<script>
import SomeComponent from './SomeComponent.vue';

export default {
  components: {
    SomeComponent
  }
}

This doesn't work:

<template>
  <some-component>
    <template #some-slot>
      This works 1
    </template>

    <template v-if="true"> <!-- some arbitrary conditional -->
      <template #some-slot>
        This doesn't work
      </template>
    </template>
  </some-component>
</template>

<script>
import SomeComponent from './SomeComponent.vue';

export default {
  components: {
    SomeComponent
  }
}

What did you expect to happen?
For the autofix to not convert the slot="slot-name" to #slot-name if it's not being used on an immediate child.

What actually happened?

It autofixed, and is caught as an invalid slot usage by vue/valid-v-slot.

Repository to reproduce this issue
JSFiddle links above should suffice.

[privatenumber]

Thank you @ota-meshi ❤️