`valid-v-slot` to accept custom components within SVG

[cassiebrooks]

What rule do you want to change?
I'd like vue/valid-v-slot to accept custom components within an <svg>

Does this change cause the rule to produce more or fewer warnings?
Fewer

How will the change be implemented? (New option, new default behavior, etc.)?
New default behavior.

Would adding || this.isSvgElementNode(node) to isCustomComponent would solve the problem?

MyComponent template:

<g>
  <slot></slot>
</g>

Currently gives error:

<svg>
  <MyComponent v-slot="slotProps">    <!-- 'v-slot' directive must be owned by a custom element, but 'MyComponent' is not -->
    <MyChildComponent :thing="slotProps.thing" />
  </MyComponent>
</svg>

Currently doesn't give error:

<div>
  <MyComponent v-slot="slotProps">
    <MyChildComponent :thing="slotProps.thing" />
  </MyComponent>
</div>

(I wouldn't actually use a g within a div, it's just to illustrate how to get rid of the error)

What does the rule currently do for this code?
Gives an error:
'v-slot' directive must be owned by a custom element, but 'MyComponent' is not

What will the rule do after it's changed?
Consider the code valid

Additional context
My use case is drawing charts with D3

[runarberg]

This is happening to me as well. Is there any work around?

[cassiebrooks]

I had to turn the rule off for the impacted files

[runarberg]

Note the same false positive occurs for vue/valid-v-model.

<svg>
  <MyComponent v-model="modelValue" />    <!-- 'v-model' directives aren't supported on <mycomponent> elements (vue/valid-v-model) -->
</svg>