feat(no-v-text-v-html-on-component): add ignore namespace option

docs/rules/no-v-text-v-html-on-component.md

@@ -25,11 +25,15 @@ If you use v-text / v-html on a component, it will overwrite the component's con
   <!-- ✓ GOOD -->
   <div v-text="content"></div>
   <div v-html="html"></div>
+  <svg><g v-text="content" /></svg>
+  <math><mi v-text="content" /></math>
   <MyComponent>{{ content }}</MyComponent>
 
   <!-- ✗ BAD -->
   <MyComponent v-text="content"></MyComponent>
   <MyComponent v-html="html"></MyComponent>
+  <g v-text="content" />
+  <mi v-text="content" />
 </template>
 ```
 
@@ -39,14 +43,15 @@ If you use v-text / v-html on a component, it will overwrite the component's con
 
 ```json
 {
-  "vue/no-v-text-v-html-on-component": [
-    "error",
-    { "allow": ["router-link", "nuxt-link"] }
-  ]
+  "vue/no-v-text-v-html-on-component": ["error", {
+    "allow": ["router-link", "nuxt-link"],
+    "ignoreElementNamespaces": false
+  }]
 }
 ```
 
 - `allow` (`string[]`) ... Specify a list of custom components for which the rule should not apply.
+- `ignoreElementNamespaces` (`boolean`) ... Specify whether to ignore the namespace restrictions for SVG and MathML elements, so that the rule should not apply. Default is `false`.
 
 ### `{ "allow": ["router-link", "nuxt-link"] }`
 
@@ -65,6 +70,20 @@ If you use v-text / v-html on a component, it will overwrite the component's con
 
 </eslint-code-block>
 
+### `{ "ignoreElementNamespaces": true }`
+
+<eslint-code-block :rules="{'vue/no-v-text-v-html-on-component': ['error', { ignoreElementNamespaces: true }]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <g v-text="content" /> <!-- <svg> -->
+  <mi v-text="content" /> <!-- <math> -->
+</template>
+```
+
+</eslint-code-block>
+
 ## :rocket: Version
 
 This rule was introduced in eslint-plugin-vue v8.4.0

lib/rules/no-v-text-v-html-on-component.js

@@ -26,6 +26,9 @@ module.exports = {
               type: 'string'
             },
             uniqueItems: true
+          },
+          ignoreElementNamespaces: {
+            type: 'boolean'
           }
         },
         additionalProperties: false
@@ -41,6 +44,8 @@ module.exports = {
     const options = context.options[0] || {}
     /** @type {Set<string>} */
     const allow = new Set(options.allow)
+    /** @type {boolean} */
+    const ignoreElementNamespaces = options.ignoreElementNamespaces === true
 
     /**
      * Check whether the given node is an allowed component or not.
@@ -56,13 +61,29 @@ module.exports = {
       )
     }
 
+    /** @param {VElement} element */
+    function isCustomComponent(element) {
+      if (ignoreElementNamespaces) {
+        return (
+          (!utils.isHtmlWellKnownElementName(element.rawName) &&
+            !utils.isSvgWellKnownElementName(element.rawName) &&
+            !utils.isMathWellKnownElementName(element.rawName)) ||
+          utils.hasAttribute(element, 'is') ||
+          utils.hasDirective(element, 'bind', 'is') ||
+          utils.hasDirective(element, 'is')
+        )
+      }
+
+      return utils.isCustomComponent(element)
+    }
+
     /**
      * Verify for v-text and v-html directive
      * @param {VDirective} node
      */
     function verify(node) {
       const element = node.parent.parent
-      if (utils.isCustomComponent(element) && !isAllowedComponent(element)) {
+      if (isCustomComponent(element) && !isAllowedComponent(element)) {
         context.report({
           node,
           loc: node.loc,

tests/lib/rules/no-v-text-v-html-on-component.js

@@ -59,6 +59,26 @@ tester.run('no-v-text-v-html-on-component', rule, {
       </template>
       `,
       options: [{ allow: ['RouterLink', 'nuxt-link'] }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <svg><g v-text="content" /></svg>
+        <math><mspace v-text="content" /></math>
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <h1 v-html="content" />
+        <g v-text="content" />
+        <mi v-text="content" />
+      </template>
+      `,
+      options: [{ ignoreElementNamespaces: true }]
     }
   ],
   invalid: [
@@ -167,6 +187,28 @@ tester.run('no-v-text-v-html-on-component', rule, {
           column: 22
         }
       ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <g v-text="content" />
+        <mi v-text="content" />
+      </template>
+      `,
+      options: [{ ignoreElementNamespaces: false }],
+      errors: [
+        {
+          message: "Using v-text on component may break component's content.",
+          line: 3,
+          column: 12
+        },
+        {
+          message: "Using v-text on component may break component's content.",
+          line: 4,
+          column: 13
+        }
+      ]
     }
   ]
 })