feat(no-restricted-html-elements): support all types element

waynzh · waynzh · commit cc2912e3b16d · 2025-06-09T17:12:35.000+08:00
diff --git a/docs/rules/index.md b/docs/rules/index.md
@@ -245,7 +245,7 @@ For example:
 | [vue/no-restricted-component-names] | disallow specific component names | :bulb: | :hammer: |
 | [vue/no-restricted-component-options] | disallow specific component option |  | :hammer: |
 | [vue/no-restricted-custom-event] | disallow specific custom event | :bulb: | :hammer: |
-| [vue/no-restricted-html-elements] | disallow specific HTML elements |  | :hammer: |
+| [vue/no-restricted-html-elements] | disallow specific elements |  | :hammer: |
 | [vue/no-restricted-props] | disallow specific props | :bulb: | :hammer: |
 | [vue/no-restricted-static-attribute] | disallow specific attribute |  | :hammer: |
 | [vue/no-restricted-v-bind] | disallow specific argument in `v-bind` |  | :hammer: |
diff --git a/docs/rules/no-restricted-html-elements.md b/docs/rules/no-restricted-html-elements.md
@@ -2,17 +2,17 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/no-restricted-html-elements
-description: disallow specific HTML elements
+description: disallow specific elements
 since: v8.6.0
 ---
 
 # vue/no-restricted-html-elements
 
-> disallow specific HTML elements
+> disallow specific elements
 
 ## :book: Rule Details
 
-This rule allows you to specify HTML elements that you don't want to use in your application.
+This rule allows you to specify HTML, SVG, and MathML elements that you don't want to use in your application.
 
 <eslint-code-block :rules="{'vue/no-restricted-html-elements': ['error', 'marquee', 'button'] }">
 
@@ -33,7 +33,7 @@ This rule allows you to specify HTML elements that you don't want to use in your
 
 ## :wrench: Options
 
-This rule takes a list of strings, where each string is an HTML element name to be restricted:
+This rule takes a list of strings, where each string is an element name to be restricted:
 
 ```json
 {
@@ -73,7 +73,7 @@ Alternatively, the rule also accepts objects.
 
 The following properties can be specified for the object.
 
-- `element` ... Specify the HTML element or an array of HTML elements.
+- `element` ... Specify the element name or an array of element names.
 - `message` ... Specify an optional custom message.
 
 ### `{ "element": "marquee" }, { "element": "a" }`
diff --git a/lib/rules/no-restricted-html-elements.js b/lib/rules/no-restricted-html-elements.js
@@ -10,7 +10,7 @@ module.exports = {
   meta: {
     type: 'suggestion',
     docs: {
-      description: 'disallow specific HTML elements',
+      description: 'disallow specific elements',
       categories: undefined,
       url: 'https://eslint.vuejs.org/rules/no-restricted-html-elements.html'
     },
@@ -40,7 +40,7 @@ module.exports = {
       minItems: 0
     },
     messages: {
-      forbiddenElement: 'Unexpected use of forbidden HTML element {{name}}.',
+      forbiddenElement: 'Unexpected use of forbidden element {{name}}.',
       // eslint-disable-next-line eslint-plugin/report-message-format
       customMessage: '{{message}}'
     }
@@ -55,7 +55,11 @@ module.exports = {
        * @param {VElement} node
        */
       VElement(node) {
-        if (!utils.isHtmlElementNode(node)) {
+        if (
+          !utils.isHtmlElementNode(node) &&
+          !utils.isSvgElementNode(node) &&
+          !utils.isMathElementNode(node)
+        ) {
           return
         }
 
diff --git a/tests/lib/rules/no-restricted-html-elements.js b/tests/lib/rules/no-restricted-html-elements.js
@@ -36,6 +36,18 @@ tester.run('no-restricted-html-elements', rule, {
       filename: 'test.vue',
       code: '<template><main><article></article></main></template>',
       options: [{ element: ['div', 'span'] }]
+    },
+    // SVG
+    {
+      filename: 'test.vue',
+      code: '<template><svg><rect width="100" height="100"></rect></svg></template>',
+      options: ['circle']
+    },
+    // Math
+    {
+      filename: 'test.vue',
+      code: '<template><math><mn>2</mn></math></template>',
+      options: ['mi']
     }
   ],
   invalid: [
@@ -45,7 +57,7 @@ tester.run('no-restricted-html-elements', rule, {
       options: ['button'],
       errors: [
         {
-          message: 'Unexpected use of forbidden HTML element button.',
+          message: 'Unexpected use of forbidden element button.',
           line: 1,
           column: 16
         }
@@ -57,7 +69,7 @@ tester.run('no-restricted-html-elements', rule, {
       options: ['div'],
       errors: [
         {
-          message: 'Unexpected use of forbidden HTML element div.',
+          message: 'Unexpected use of forbidden element div.',
           line: 1,
           column: 11
         }
@@ -96,6 +108,63 @@ tester.run('no-restricted-html-elements', rule, {
           column: 18
         }
       ]
+    },
+    // SVG
+    {
+      filename: 'test.vue',
+      code: '<template><svg><circle r="50"></circle></svg></template>',
+      options: ['circle'],
+      errors: [
+        {
+          message: 'Unexpected use of forbidden element circle.',
+          line: 1,
+          column: 16
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><svg><rect width="100" height="100"></rect><path d="M10,10 L20,20"></path></svg></template>',
+      options: [
+        { element: ['rect', 'path'], message: 'Use simplified shapes instead' }
+      ],
+      errors: [
+        {
+          message: 'Use simplified shapes instead',
+          line: 1,
+          column: 16
+        },
+        {
+          message: 'Use simplified shapes instead',
+          line: 1,
+          column: 54
+        }
+      ]
+    },
+    // Math
+    {
+      filename: 'test.vue',
+      code: '<template><math><mfrac><mn>1</mn><mn>2</mn></mfrac></math></template>',
+      options: ['mfrac'],
+      errors: [
+        {
+          message: 'Unexpected use of forbidden element mfrac.',
+          line: 1,
+          column: 17
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><math><mi>x</mi><mo>=</mo><mn>5</mn></math></template>',
+      options: [{ element: 'mo', message: 'Avoid using operators directly' }],
+      errors: [
+        {
+          message: 'Avoid using operators directly',
+          line: 1,
+          column: 27
+        }
+      ]
     }
   ]
 })
