From b6dea9f18351511664571ce6886e6807a5957823 Mon Sep 17 00:00:00 2001
From: Flo Edelmann <florian-edelmann@online.de>
Date: Fri, 12 Nov 2021 14:14:12 +0100
Subject: [PATCH 1/6] Add `vue/no-child-content` rule

---
 docs/rules/no-child-content.md      |  53 +++++++++
 lib/index.js                        |   1 +
 lib/rules/no-child-content.js       |  93 +++++++++++++++
 tests/lib/rules/no-child-content.js | 172 ++++++++++++++++++++++++++++
 4 files changed, 319 insertions(+)
 create mode 100644 docs/rules/no-child-content.md
 create mode 100644 lib/rules/no-child-content.js
 create mode 100644 tests/lib/rules/no-child-content.js

diff --git a/docs/rules/no-child-content.md b/docs/rules/no-child-content.md
new file mode 100644
index 000000000..f4aef38fe
--- /dev/null
+++ b/docs/rules/no-child-content.md
@@ -0,0 +1,53 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-child-content
+description: disallow element's child contents which would be overwritten by a directive like `v-html` or `v-text`
+---
+# vue/no-child-content
+
+> disallow element's child contents which would be overwritten by a directive like `v-html` or `v-text`
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
+- :gear: This rule is included in .
+
+## :book: Rule Details
+
+This rule reports child content of elements that have a directive which overwrites that child content. By default, those are `v-html` and `v-text`, additional ones (e.g. [Vue I18n's `v-t` directive](https://vue-i18n.intlify.dev/api/directive.html)) can be configured manually.
+
+<eslint-code-block :rules="{'vue/no-child-content': ['error']}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <div>child content</div>
+  <div v-html="replacesChildContent"></div>
+
+  <!-- ✗ BAD -->
+  <div v-html="replacesChildContent">child content</div>
+</template>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+```json
+{
+  "vue/no-child-content": ["error", {
+    "additionalDirectives": ["foo"] // checks v-foo directive
+  }]
+}
+```
+
+- `additionalDirectives` ... An array of additional directives to check, without the `v-` prefix. Empty by default; `v-html` and `v-text` are always checked.
+
+## :books: Further Reading
+
+- [`v-html` directive](https://v3.vuejs.org/api/directives.html#v-html)
+- [`v-text` directive](https://v3.vuejs.org/api/directives.html#v-text)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-child-content.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-child-content.js)
diff --git a/lib/index.js b/lib/index.js
index 60d7aac0e..437ed3e49 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -58,6 +58,7 @@ module.exports = {
     'no-async-in-computed-properties': require('./rules/no-async-in-computed-properties'),
     'no-bare-strings-in-template': require('./rules/no-bare-strings-in-template'),
     'no-boolean-default': require('./rules/no-boolean-default'),
+    'no-child-content': require('./rules/no-child-content'),
     'no-computed-properties-in-data': require('./rules/no-computed-properties-in-data'),
     'no-confusing-v-for-v-if': require('./rules/no-confusing-v-for-v-if'),
     'no-constant-condition': require('./rules/no-constant-condition'),
diff --git a/lib/rules/no-child-content.js b/lib/rules/no-child-content.js
new file mode 100644
index 000000000..d13e3bf7d
--- /dev/null
+++ b/lib/rules/no-child-content.js
@@ -0,0 +1,93 @@
+/**
+ * @author Flo Edelmann
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+const utils = require('../utils')
+
+/**
+ * @typedef {object} RuleOption
+ * @property {string[]} additionalDirectives
+ */
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    hasSuggestions: true,
+    type: 'problem',
+    docs: {
+      description:
+        "disallow element's child contents which would be overwritten by a directive like `v-html` or `v-text`",
+      categories: [],
+      url: 'https://eslint.vuejs.org/rules/no-child-content.html'
+    },
+    fixable: null,
+    schema: [
+      {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+          additionalDirectives: {
+            type: 'array',
+            uniqueItems: true,
+            minItems: 1,
+            items: {
+              type: 'string'
+            }
+          }
+        },
+        required: ['additionalDirectives']
+      }
+    ]
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    const directives = new Set(['html', 'text'])
+
+    /** @type {RuleOption | undefined} */
+    const option = context.options[0]
+    if (option !== undefined) {
+      for (const directive of option.additionalDirectives) {
+        directives.add(directive)
+      }
+    }
+
+    return utils.defineTemplateBodyVisitor(context, {
+      /** @param {VDirective} directiveNode */
+      'VAttribute[directive=true]'(directiveNode) {
+        const directiveName = directiveNode.key.name.name
+        const elementNode = directiveNode.parent.parent
+
+        if (directives.has(directiveName) && elementNode.children.length > 0) {
+          const firstChildNode = elementNode.children[0]
+          const lastChildNode =
+            elementNode.children[elementNode.children.length - 1]
+
+          context.report({
+            node: elementNode,
+            loc: {
+              start: firstChildNode.loc.start,
+              end: lastChildNode.loc.end
+            },
+            message:
+              'Child content is disallowed because it will be overwritten by the v-{{ directiveName }} directive.',
+            data: { directiveName },
+            suggest: [
+              {
+                desc: 'Remove child content.',
+                *fix(fixer) {
+                  for (const childNode of elementNode.children) {
+                    yield fixer.remove(childNode)
+                  }
+                }
+              }
+            ]
+          })
+        }
+      }
+    })
+  }
+}
diff --git a/tests/lib/rules/no-child-content.js b/tests/lib/rules/no-child-content.js
new file mode 100644
index 000000000..23343304e
--- /dev/null
+++ b/tests/lib/rules/no-child-content.js
@@ -0,0 +1,172 @@
+/**
+ * @author Flo Edelmann
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const RuleTester = require('eslint').RuleTester
+const rule = require('../../../lib/rules/no-child-content')
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+const ruleTester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: { ecmaVersion: 2015 }
+})
+
+ruleTester.run('no-child-content', rule, {
+  valid: [
+    {
+      // element without directive
+      filename: 'test.vue',
+      code: '<template><div>foo</div></template>'
+    },
+    {
+      // element with unknown directive
+      filename: 'test.vue',
+      code: '<template><div v-foo="bar" /></template>'
+    },
+    {
+      // self-closing element with v-html directive
+      filename: 'test.vue',
+      code: '<template><div v-html="foo" /></template>'
+    },
+    {
+      // self-closing element with v-text directive
+      filename: 'test.vue',
+      code: '<template><div v-text="foo" /></template>'
+    },
+    {
+      // empty element with v-html directive
+      filename: 'test.vue',
+      code: '<template><div v-html="foo"></div></template>'
+    },
+    {
+      // self-closing element with v-t directive
+      filename: 'test.vue',
+      options: [{ additionalDirectives: ['t'] }],
+      code: '<template><div v-t="foo" /></template>'
+    }
+  ],
+  invalid: [
+    {
+      // v-html directive and text content
+      filename: 'test.vue',
+      code: '<template><div v-html="foo">bar</div></template>',
+      errors: [
+        {
+          message:
+            'Child content is disallowed because it will be overwritten by the v-html directive.',
+          column: 29,
+          endColumn: 32,
+          suggestions: [
+            { output: '<template><div v-html="foo"></div></template>' }
+          ]
+        }
+      ]
+    },
+    {
+      // v-html directive and whitespace-only text content
+      filename: 'test.vue',
+      code: '<template><div v-html="foo"> </div></template>',
+      errors: [
+        {
+          message:
+            'Child content is disallowed because it will be overwritten by the v-html directive.',
+          column: 29,
+          endColumn: 30,
+          suggestions: [
+            { output: '<template><div v-html="foo"></div></template>' }
+          ]
+        }
+      ]
+    },
+    {
+      // v-html directive and text expression content
+      filename: 'test.vue',
+      code: '<template><div v-html="foo">{{ bar }}</div></template>',
+      errors: [
+        {
+          message:
+            'Child content is disallowed because it will be overwritten by the v-html directive.',
+          column: 29,
+          endColumn: 38,
+          suggestions: [
+            { output: '<template><div v-html="foo"></div></template>' }
+          ]
+        }
+      ]
+    },
+    {
+      // v-html directive and child element
+      filename: 'test.vue',
+      code: '<template><div v-html="foo"><span /></div></template>',
+      errors: [
+        {
+          message:
+            'Child content is disallowed because it will be overwritten by the v-html directive.',
+          column: 29,
+          endColumn: 37,
+          suggestions: [
+            { output: '<template><div v-html="foo"></div></template>' }
+          ]
+        }
+      ]
+    },
+    {
+      // v-text directive and text content
+      filename: 'test.vue',
+      code: '<template><div v-text="foo">bar</div></template>',
+      errors: [
+        {
+          message:
+            'Child content is disallowed because it will be overwritten by the v-text directive.',
+          column: 29,
+          endColumn: 32,
+          suggestions: [
+            { output: '<template><div v-text="foo"></div></template>' }
+          ]
+        }
+      ]
+    },
+    {
+      // v-t directive and text content
+      filename: 'test.vue',
+      options: [{ additionalDirectives: ['t'] }],
+      code: '<template><div v-t="foo">bar</div></template>',
+      errors: [
+        {
+          message:
+            'Child content is disallowed because it will be overwritten by the v-t directive.',
+          column: 26,
+          endColumn: 29,
+          suggestions: [
+            { output: '<template><div v-t="foo"></div></template>' }
+          ]
+        }
+      ]
+    },
+    {
+      // v-html directive and text content while v-t directive is configured
+      filename: 'test.vue',
+      options: [{ additionalDirectives: ['t'] }],
+      code: '<template><div v-html="foo">baz</div></template>',
+      errors: [
+        {
+          message:
+            'Child content is disallowed because it will be overwritten by the v-html directive.',
+          column: 29,
+          endColumn: 32,
+          suggestions: [
+            { output: '<template><div v-html="foo"></div></template>' }
+          ]
+        }
+      ]
+    }
+  ]
+})

From 31a2c6f06e5ba75947f1623265f71b7e3320e3e3 Mon Sep 17 00:00:00 2001
From: Flo Edelmann <florian-edelmann@online.de>
Date: Fri, 12 Nov 2021 14:29:26 +0100
Subject: [PATCH 2/6] Fix rule category

---
 docs/rules/README.md           | 1 +
 docs/rules/no-child-content.md | 1 -
 lib/rules/no-child-content.js  | 2 +-
 3 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/rules/README.md b/docs/rules/README.md
index 8619d88f1..524476c3a 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -319,6 +319,7 @@ For example:
 | [vue/next-tick-style](./next-tick-style.md) | enforce Promise or callback style in `nextTick` | :wrench: |
 | [vue/no-bare-strings-in-template](./no-bare-strings-in-template.md) | disallow the use of bare strings in `<template>` |  |
 | [vue/no-boolean-default](./no-boolean-default.md) | disallow boolean defaults | :wrench: |
+| [vue/no-child-content](./no-child-content.md) | disallow element's child contents which would be overwritten by a directive like `v-html` or `v-text` |  |
 | [vue/no-duplicate-attr-inheritance](./no-duplicate-attr-inheritance.md) | enforce `inheritAttrs` to be set to `false` when using `v-bind="$attrs"` |  |
 | [vue/no-empty-component-block](./no-empty-component-block.md) | disallow the `<template>` `<script>` `<style>` block to be empty |  |
 | [vue/no-invalid-model-keys](./no-invalid-model-keys.md) | require valid keys in model option |  |
diff --git a/docs/rules/no-child-content.md b/docs/rules/no-child-content.md
index f4aef38fe..ff93a8c07 100644
--- a/docs/rules/no-child-content.md
+++ b/docs/rules/no-child-content.md
@@ -9,7 +9,6 @@ description: disallow element's child contents which would be overwritten by a d
 > disallow element's child contents which would be overwritten by a directive like `v-html` or `v-text`
 
 - :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
-- :gear: This rule is included in .
 
 ## :book: Rule Details
 
diff --git a/lib/rules/no-child-content.js b/lib/rules/no-child-content.js
index d13e3bf7d..774f5fff3 100644
--- a/lib/rules/no-child-content.js
+++ b/lib/rules/no-child-content.js
@@ -21,7 +21,7 @@ module.exports = {
     docs: {
       description:
         "disallow element's child contents which would be overwritten by a directive like `v-html` or `v-text`",
-      categories: [],
+      categories: undefined,
       url: 'https://eslint.vuejs.org/rules/no-child-content.html'
     },
     fixable: null,

From 1114106e5f6fdaafd873c07f1de5846ec4c939f6 Mon Sep 17 00:00:00 2001
From: Flo Edelmann <florian-edelmann@online.de>
Date: Tue, 16 Nov 2021 09:56:34 +0100
Subject: [PATCH 3/6] Add hints about available suggestions

---
 docs/rules/README.md           | 2 +-
 docs/rules/no-child-content.md | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/rules/README.md b/docs/rules/README.md
index 9e54c3393..684731a95 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -321,7 +321,7 @@ For example:
 | [vue/next-tick-style](./next-tick-style.md) | enforce Promise or callback style in `nextTick` | :wrench: |
 | [vue/no-bare-strings-in-template](./no-bare-strings-in-template.md) | disallow the use of bare strings in `<template>` |  |
 | [vue/no-boolean-default](./no-boolean-default.md) | disallow boolean defaults | :wrench: |
-| [vue/no-child-content](./no-child-content.md) | disallow element's child contents which would be overwritten by a directive like `v-html` or `v-text` |  |
+| [vue/no-child-content](./no-child-content.md) | disallow element's child contents which would be overwritten by a directive like `v-html` or `v-text` | :bulb: |
 | [vue/no-duplicate-attr-inheritance](./no-duplicate-attr-inheritance.md) | enforce `inheritAttrs` to be set to `false` when using `v-bind="$attrs"` |  |
 | [vue/no-empty-component-block](./no-empty-component-block.md) | disallow the `<template>` `<script>` `<style>` block to be empty |  |
 | [vue/no-invalid-model-keys](./no-invalid-model-keys.md) | require valid keys in model option |  |
diff --git a/docs/rules/no-child-content.md b/docs/rules/no-child-content.md
index ff93a8c07..f3bf31771 100644
--- a/docs/rules/no-child-content.md
+++ b/docs/rules/no-child-content.md
@@ -9,6 +9,7 @@ description: disallow element's child contents which would be overwritten by a d
 > disallow element's child contents which would be overwritten by a directive like `v-html` or `v-text`
 
 - :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
+- :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
 
 ## :book: Rule Details
 

From 26bdb6d29d73d2e619f19bffa0d4ba1948d8ed79 Mon Sep 17 00:00:00 2001
From: Flo Edelmann <florian-edelmann@online.de>
Date: Tue, 16 Nov 2021 10:16:22 +0100
Subject: [PATCH 4/6] Don't report whitespace-only child content

---
 lib/rules/no-child-content.js       | 22 +++++++++++++++-----
 tests/lib/rules/no-child-content.js | 31 ++++++++++++++---------------
 2 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/lib/rules/no-child-content.js b/lib/rules/no-child-content.js
index 774f5fff3..aaf957f10 100644
--- a/lib/rules/no-child-content.js
+++ b/lib/rules/no-child-content.js
@@ -10,6 +10,14 @@ const utils = require('../utils')
  * @property {string[]} additionalDirectives
  */
 
+/**
+ * @param {VNode} node
+ * @returns {boolean}
+ */
+function isWhiteSpaceTextNode(node) {
+  return node.type === 'VText' && node.value.trim() === ''
+}
+
 // ------------------------------------------------------------------------------
 // Rule Definition
 // ------------------------------------------------------------------------------
@@ -60,11 +68,15 @@ module.exports = {
       'VAttribute[directive=true]'(directiveNode) {
         const directiveName = directiveNode.key.name.name
         const elementNode = directiveNode.parent.parent
+        const childNodes = elementNode.children
 
-        if (directives.has(directiveName) && elementNode.children.length > 0) {
-          const firstChildNode = elementNode.children[0]
-          const lastChildNode =
-            elementNode.children[elementNode.children.length - 1]
+        if (
+          directives.has(directiveName) &&
+          childNodes.length > 0 &&
+          childNodes.some((childNode) => !isWhiteSpaceTextNode(childNode))
+        ) {
+          const firstChildNode = childNodes[0]
+          const lastChildNode = childNodes[childNodes.length - 1]
 
           context.report({
             node: elementNode,
@@ -79,7 +91,7 @@ module.exports = {
               {
                 desc: 'Remove child content.',
                 *fix(fixer) {
-                  for (const childNode of elementNode.children) {
+                  for (const childNode of childNodes) {
                     yield fixer.remove(childNode)
                   }
                 }
diff --git a/tests/lib/rules/no-child-content.js b/tests/lib/rules/no-child-content.js
index 23343304e..fc252d659 100644
--- a/tests/lib/rules/no-child-content.js
+++ b/tests/lib/rules/no-child-content.js
@@ -46,6 +46,21 @@ ruleTester.run('no-child-content', rule, {
       filename: 'test.vue',
       code: '<template><div v-html="foo"></div></template>'
     },
+    {
+      // v-html directive and whitespace-only text content
+      filename: 'test.vue',
+      code: '<template><div v-html="foo"> </div></template>'
+    },
+    {
+      // v-html directive and whitespace-only text content with newline
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-html="foo">
+          </div>
+        </template>
+      `
+    },
     {
       // self-closing element with v-t directive
       filename: 'test.vue',
@@ -70,22 +85,6 @@ ruleTester.run('no-child-content', rule, {
         }
       ]
     },
-    {
-      // v-html directive and whitespace-only text content
-      filename: 'test.vue',
-      code: '<template><div v-html="foo"> </div></template>',
-      errors: [
-        {
-          message:
-            'Child content is disallowed because it will be overwritten by the v-html directive.',
-          column: 29,
-          endColumn: 30,
-          suggestions: [
-            { output: '<template><div v-html="foo"></div></template>' }
-          ]
-        }
-      ]
-    },
     {
       // v-html directive and text expression content
       filename: 'test.vue',

From 269a06b9431a0e71ec875d24ed4b3ce37d207a44 Mon Sep 17 00:00:00 2001
From: Flo Edelmann <florian-edelmann@online.de>
Date: Tue, 16 Nov 2021 11:05:49 +0100
Subject: [PATCH 5/6] Report comments in `vue/no-child-content`

---
 lib/rules/no-child-content.js       | 74 ++++++++++++++++++++++++-----
 lib/utils/index.js                  |  2 +-
 tests/lib/rules/no-child-content.js | 53 +++++++++++++++++++++
 3 files changed, 117 insertions(+), 12 deletions(-)

diff --git a/lib/rules/no-child-content.js b/lib/rules/no-child-content.js
index aaf957f10..e53737d6d 100644
--- a/lib/rules/no-child-content.js
+++ b/lib/rules/no-child-content.js
@@ -3,7 +3,7 @@
  * See LICENSE file in root directory for full license.
  */
 'use strict'
-const utils = require('../utils')
+const { defineTemplateBodyVisitor, inRange } = require('../utils')
 
 /**
  * @typedef {object} RuleOption
@@ -11,13 +11,63 @@ const utils = require('../utils')
  */
 
 /**
- * @param {VNode} node
+ * @param {VNode | Token} node
  * @returns {boolean}
  */
 function isWhiteSpaceTextNode(node) {
   return node.type === 'VText' && node.value.trim() === ''
 }
 
+/**
+ * @param {Position} pos1
+ * @param {Position} pos2
+ * @returns {'less' | 'equal' | 'greater'}
+ */
+function comparePositions(pos1, pos2) {
+  if (
+    pos1.line < pos2.line ||
+    (pos1.line === pos2.line && pos1.column < pos2.column)
+  ) {
+    return 'less'
+  }
+
+  if (
+    pos1.line > pos2.line ||
+    (pos1.line === pos2.line && pos1.column > pos2.column)
+  ) {
+    return 'greater'
+  }
+
+  return 'equal'
+}
+
+/**
+ * @param {(VNode | Token)[]} nodes
+ * @returns {SourceLocation | undefined}
+ */
+function getLocationRange(nodes) {
+  /** @type {Position | undefined} */
+  let start
+  /** @type {Position | undefined} */
+  let end
+
+  for (const node of nodes) {
+    if (!start || comparePositions(node.loc.start, start) === 'less') {
+      start = node.loc.start
+    }
+
+    if (!end || comparePositions(node.loc.end, end) === 'greater') {
+      end = node.loc.end
+    }
+  }
+
+  if (start === undefined || end === undefined) {
+    return undefined
+  }
+
+  return { start, end }
+}
+
 // ------------------------------------------------------------------------------
 // Rule Definition
 // ------------------------------------------------------------------------------
@@ -63,27 +113,29 @@ module.exports = {
       }
     }
 
-    return utils.defineTemplateBodyVisitor(context, {
+    const templateBody = context.getSourceCode().ast.templateBody
+    const templateComments = templateBody ? templateBody.comments : []
+
+    return defineTemplateBodyVisitor(context, {
       /** @param {VDirective} directiveNode */
       'VAttribute[directive=true]'(directiveNode) {
         const directiveName = directiveNode.key.name.name
         const elementNode = directiveNode.parent.parent
-        const childNodes = elementNode.children
+
+        const elementComments = templateComments.filter((comment) =>
+          inRange(elementNode.range, comment)
+        )
+
+        const childNodes = [...elementNode.children, ...elementComments]
 
         if (
           directives.has(directiveName) &&
           childNodes.length > 0 &&
           childNodes.some((childNode) => !isWhiteSpaceTextNode(childNode))
         ) {
-          const firstChildNode = childNodes[0]
-          const lastChildNode = childNodes[childNodes.length - 1]
-
           context.report({
             node: elementNode,
-            loc: {
-              start: firstChildNode.loc.start,
-              end: lastChildNode.loc.end
-            },
+            loc: getLocationRange(childNodes),
             message:
               'Child content is disallowed because it will be overwritten by the v-{{ directiveName }} directive.',
             data: { directiveName },
diff --git a/lib/utils/index.js b/lib/utils/index.js
index ef82c7b9d..d6c3a6f5a 100644
--- a/lib/utils/index.js
+++ b/lib/utils/index.js
@@ -1695,7 +1695,7 @@ module.exports = {
   /**
    * Checks whether the target node is within the given range.
    * @param { [number, number] } range
-   * @param {ASTNode} target
+   * @param {ASTNode | Token} target
    */
   inRange(range, target) {
     return range[0] <= target.range[0] && target.range[1] <= range[1]
diff --git a/tests/lib/rules/no-child-content.js b/tests/lib/rules/no-child-content.js
index fc252d659..320b7ade2 100644
--- a/tests/lib/rules/no-child-content.js
+++ b/tests/lib/rules/no-child-content.js
@@ -66,6 +66,11 @@ ruleTester.run('no-child-content', rule, {
       filename: 'test.vue',
       options: [{ additionalDirectives: ['t'] }],
       code: '<template><div v-t="foo" /></template>'
+    },
+    {
+      // self-closing element with v-html directive and sibling comment element
+      filename: 'test.vue',
+      code: '<template><div v-html="foo" /><!-- bar --></template>'
     }
   ],
   invalid: [
@@ -117,6 +122,54 @@ ruleTester.run('no-child-content', rule, {
         }
       ]
     },
+    {
+      // v-html directive and child comment element
+      filename: 'test.vue',
+      code: '<template><div v-html="foo"><!-- bar --></div></template>',
+      errors: [
+        {
+          message:
+            'Child content is disallowed because it will be overwritten by the v-html directive.',
+          column: 29,
+          endColumn: 41,
+          suggestions: [
+            { output: '<template><div v-html="foo"></div></template>' }
+          ]
+        }
+      ]
+    },
+    {
+      // v-html directive and multiple child elements
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-html="foo">
+            <!-- this is a test -->
+            <span>foo</span>
+            bar
+          </div>
+        </template>
+      `,
+      errors: [
+        {
+          message:
+            'Child content is disallowed because it will be overwritten by the v-html directive.',
+          line: 3,
+          column: 29,
+          endLine: 7,
+          endColumn: 11,
+          suggestions: [
+            {
+              output: `
+        <template>
+          <div v-html="foo"></div>
+        </template>
+      `
+            }
+          ]
+        }
+      ]
+    },
     {
       // v-text directive and text content
       filename: 'test.vue',

From 9566ee4a20fffdb13feca7cf7c5db58529971504 Mon Sep 17 00:00:00 2001
From: Flo Edelmann <florian-edelmann@online.de>
Date: Wed, 17 Nov 2021 08:48:03 +0100
Subject: [PATCH 6/6] Simplify comment parsing with
 `tokenStore.getTokensBetween`

---
 lib/rules/no-child-content.js | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/lib/rules/no-child-content.js b/lib/rules/no-child-content.js
index e53737d6d..85636d1d4 100644
--- a/lib/rules/no-child-content.js
+++ b/lib/rules/no-child-content.js
@@ -3,7 +3,7 @@
  * See LICENSE file in root directory for full license.
  */
 'use strict'
-const { defineTemplateBodyVisitor, inRange } = require('../utils')
+const { defineTemplateBodyVisitor } = require('../utils')
 
 /**
  * @typedef {object} RuleOption
@@ -113,17 +113,24 @@ module.exports = {
       }
     }
 
-    const templateBody = context.getSourceCode().ast.templateBody
-    const templateComments = templateBody ? templateBody.comments : []
-
     return defineTemplateBodyVisitor(context, {
       /** @param {VDirective} directiveNode */
       'VAttribute[directive=true]'(directiveNode) {
         const directiveName = directiveNode.key.name.name
         const elementNode = directiveNode.parent.parent
 
-        const elementComments = templateComments.filter((comment) =>
-          inRange(elementNode.range, comment)
+        if (elementNode.endTag === null) {
+          return
+        }
+
+        const tokenStore = context.parserServices.getTemplateBodyTokenStore()
+        const elementComments = tokenStore.getTokensBetween(
+          elementNode.startTag,
+          elementNode.endTag,
+          {
+            includeComments: true,
+            filter: (token) => token.type === 'HTMLComment'
+          }
         )
 
         const childNodes = [...elementNode.children, ...elementComments]