vue/no-restricted-html-elements rule cannot disallow svg elements

[szattila98]

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: 9.28.0
• eslint-plugin-vue version: 10.2.0
• Vue version: 3.5.16
• Node version: 22.15.1
• Operating System: MacOs

Please show your full configuration:

import eslint from '@eslint/js';
import pluginVue from 'eslint-plugin-vue';
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
import globals from 'globals';

/** @type { import("eslint").Linter.Config[] } */
export default [
    {
        ignores: ['dist/**', 'coverage/**', 'eslint.config.js', 'source/common/functions/*.js']
    },
    eslint.configs.recommended,
    ...pluginVue.configs['flat/recommended'],
    eslintPluginPrettierRecommended,
    {
        rules: {
            'no-var': 'error',
            'prefer-const': 'error',
            'no-unused-vars': 'error',
            complexity: ['error', { max: 15, variant: 'modified' }],
            'no-duplicate-imports': 'error',
            'vue/require-default-prop': 'off',
            'vue/no-v-html': 'warn',
            'vue/block-lang': [
                'error',
                {
                    template: {
                        lang: 'html'
                    },
                    script: {
                        lang: 'js'
                    },
                    style: {
                        lang: 'scss'
                    }
                }
            ],
            'vue/html-self-closing': [
                'error',
                {
                    html: {
                        void: 'always'
                    }
                }
            ],
            'vue/no-restricted-html-elements': [
                'error',
                {
                    element: 'svg',
                    message: 'Prefer the use of vite-svg-loader which loads SVG-s as components'
                }
            ]
        }
    },
    {
        files: ['devtools/**/*.js', 'source/**/*.{js,vue}'],
        languageOptions: {
            globals: {
                ...globals.browser
            }
        }
    },
    {
        files: ['source/**/*.test.js'],
        languageOptions: {
            globals: {
                ...globals.vitest
            }
        }
    },
    {
        files: ['vite*.config.js', 'mock-server/**/*.js'],
        languageOptions: {
            globals: {
                ...globals.node
            }
        }
    }
];

What did you do? I tried to disallow svg elements in my vue templates but it did not raise an error. Every other element could be disallowed and raised errors, but not svg elements.

<template>
    <svg>
        ...
    </svg>
</template>

What did you expect to happen? I expected that the svg element will raise an error, with the message I provided.

What actually happened? Nothing happened, no errors on the svg element.

Repository to reproduce this issue https://github.com/szattila98/disallow-vue-element-eslint-repro
App.vue contains a disallowed p and and svg tag, but only the p tag raises an error.

[waynzh]

This rule currently only checks HTML elements. It doesn't include SVG or MathML elements.
Adding support for all of them makes sense to me.