vue/no-v-text-v-html-on-component on a g svg element

[JollyGood1]

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: 9.13.0
• eslint-plugin-vue version: 9.29.0
• Vue version: 3.5.12
• Node version: 18.18.0
• Operating System: windows 10

Please show your full configuration:

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from 'typescript-eslint';
import pluginVue from "eslint-plugin-vue";
import vueParser from "vue-eslint-parser";

export default [
    {
        files: ["**/*.{js,mjs,cjs,vue}"]
    },
    {
        languageOptions: {
            globals: globals.browser,
            parser: vueParser,
            parserOptions: {
                parser: tseslint,
                sourceType: "module",
                vueFeatures: {
                    interpolationAsNonHTML: true
                }
            },
        }
    },
    {
        ignores: ["*.js.snap"],
    },
    pluginJs.configs.recommended,
    ...pluginVue.configs["flat/recommended"],
    {
        rules: {
            // *** Priority A: Essential
            "vue/no-unused-components": "off",
            // Priority C: Recommended
            "vue/no-v-html": "off"
        }
    }
];

What did you do?

I have a code that looks something on the lines of this:

<svg>
    <g v-html="shape" />
</svg

What did you expect to happen?

I expected no error since g is an svg element and not a component

What actually happened?

I'm getting this error:

Using v-html on component may break component's content vue/no-v-text-v-html-on-component

Repository to reproduce this issue Is a repository truly necessary? I just use this code, it's pretty straight forward:

<template>
    <g v-html="shape" />
</template>

<script setup>
    const shape = ref('<path fill="#000000" d="M50,0 L58.82,37.86 L97.55,34.55 L64.27,54.64 L78.39,90.45 L50,65 L21.61,90.45 L35.73,54.64 L2.45,34.55 L41.18,37.86 Z"></path>');
</script>

[waynzh]

Only <g> within <svg> (meaning its namespace is SVG) will be recognized as a non-component. Otherwise, it will be treated as a regular component.

You can also use the allow option to disable this error.

[FloEdelmann]

Thanks @waynzh for mentioning the workaround.

This is basically the same issue as #2458, so I'll close this as a duplicate. Feel free to comment there.