fix: v-html and v-text can only be used on elements

packages/compiler-dom/__tests__/transforms/vHtml.spec.ts

@@ -6,6 +6,7 @@ import {
 } from '@vue/compiler-core'
 import { transformVHtml } from '../../src/transforms/vHtml'
 import { transformElement } from '../../../compiler-core/src/transforms/transformElement'
+import { transformSlotOutlet } from '../../../compiler-core/src/transforms/transformSlotOutlet'
 import { createObjectMatcher } from '../../../compiler-core/__tests__/testUtils'
 import { PatchFlags } from '@vue/shared'
 import { DOMErrorCodes } from '../../src/errors'
@@ -13,7 +14,7 @@ import { DOMErrorCodes } from '../../src/errors'
 function transformWithVHtml(template: string, options: CompilerOptions = {}) {
   const ast = parse(template)
   transform(ast, {
-    nodeTransforms: [transformElement],
+    nodeTransforms: [transformElement, transformSlotOutlet],
     directiveTransforms: {
       html: transformVHtml,
     },
@@ -64,4 +65,24 @@ describe('compiler: v-html transform', () => {
       [{ code: DOMErrorCodes.X_V_HTML_NO_EXPRESSION }],
     ])
   })
+
+  it('should raise error if uses on component', () => {
+    const onError = vi.fn()
+    transformWithVHtml(`<Comp v-html="'<div>foo</div>'"></Comp>`, {
+      onError,
+    })
+    expect(onError.mock.calls).toMatchObject([
+      [{ code: DOMErrorCodes.X_V_HTML_ON_INVALID_ELEMENT }],
+    ])
+  })
+
+  it('should raise error if uses on slot', () => {
+    const onError = vi.fn()
+    transformWithVHtml(`<slot v-html="'<div>foo</div>'"></slot>`, {
+      onError,
+    })
+    expect(onError.mock.calls).toMatchObject([
+      [{ code: DOMErrorCodes.X_V_HTML_ON_INVALID_ELEMENT }],
+    ])
+  })
 })

packages/compiler-dom/__tests__/transforms/vText.spec.ts

@@ -6,6 +6,7 @@ import {
 } from '@vue/compiler-core'
 import { transformVText } from '../../src/transforms/vText'
 import { transformElement } from '../../../compiler-core/src/transforms/transformElement'
+import { transformSlotOutlet } from '../../../compiler-core/src/transforms/transformSlotOutlet'
 import { createObjectMatcher } from '../../../compiler-core/__tests__/testUtils'
 import { PatchFlags } from '@vue/shared'
 import { DOMErrorCodes } from '../../src/errors'
@@ -13,7 +14,7 @@ import { DOMErrorCodes } from '../../src/errors'
 function transformWithVText(template: string, options: CompilerOptions = {}) {
   const ast = parse(template)
   transform(ast, {
-    nodeTransforms: [transformElement],
+    nodeTransforms: [transformElement, transformSlotOutlet],
     directiveTransforms: {
       text: transformVText,
     },
@@ -68,4 +69,24 @@ describe('compiler: v-text transform', () => {
       [{ code: DOMErrorCodes.X_V_TEXT_NO_EXPRESSION }],
     ])
   })
+
+  it('should raise error if uses on component', () => {
+    const onError = vi.fn()
+    transformWithVText(`<Comp v-text="xxxxx'"></Comp>`, {
+      onError,
+    })
+    expect(onError.mock.calls).toMatchObject([
+      [{ code: DOMErrorCodes.X_V_TEXT_ON_INVALID_ELEMENT }],
+    ])
+  })
+
+  it('should raise error if uses on slot', () => {
+    const onError = vi.fn()
+    transformWithVText(`<slot v-text="xxxxx"></slot>`, {
+      onError,
+    })
+    expect(onError.mock.calls).toMatchObject([
+      [{ code: DOMErrorCodes.X_V_TEXT_ON_INVALID_ELEMENT }],
+    ])
+  })
 })

packages/compiler-dom/src/errors.ts

@@ -23,8 +23,10 @@ export function createDOMCompilerError(
 export enum DOMErrorCodes {
   X_V_HTML_NO_EXPRESSION = 53 /* ErrorCodes.__EXTEND_POINT__ */,
   X_V_HTML_WITH_CHILDREN,
+  X_V_HTML_ON_INVALID_ELEMENT,
   X_V_TEXT_NO_EXPRESSION,
   X_V_TEXT_WITH_CHILDREN,
+  X_V_TEXT_ON_INVALID_ELEMENT,
   X_V_MODEL_ON_INVALID_ELEMENT,
   X_V_MODEL_ARG_ON_ELEMENT,
   X_V_MODEL_ON_FILE_INPUT_ELEMENT,
@@ -51,8 +53,10 @@ if (__TEST__) {
 export const DOMErrorMessages: { [code: number]: string } = {
   [DOMErrorCodes.X_V_HTML_NO_EXPRESSION]: `v-html is missing expression.`,
   [DOMErrorCodes.X_V_HTML_WITH_CHILDREN]: `v-html will override element children.`,
+  [DOMErrorCodes.X_V_HTML_ON_INVALID_ELEMENT]: `v-html can only be used on elements.`,
   [DOMErrorCodes.X_V_TEXT_NO_EXPRESSION]: `v-text is missing expression.`,
   [DOMErrorCodes.X_V_TEXT_WITH_CHILDREN]: `v-text will override element children.`,
+  [DOMErrorCodes.X_V_TEXT_ON_INVALID_ELEMENT]: `v-text can only be used on elements.`,
   [DOMErrorCodes.X_V_MODEL_ON_INVALID_ELEMENT]: `v-model can only be used on <input>, <textarea> and <select> elements.`,
   [DOMErrorCodes.X_V_MODEL_ARG_ON_ELEMENT]: `v-model argument is not supported on plain elements.`,
   [DOMErrorCodes.X_V_MODEL_ON_FILE_INPUT_ELEMENT]: `v-model cannot be used on file inputs since they are read-only. Use a v-on:change listener instead.`,

packages/compiler-dom/src/transforms/vHtml.ts

@@ -1,5 +1,6 @@
 import {
   type DirectiveTransform,
+  ElementTypes,
   createObjectProperty,
   createSimpleExpression,
 } from '@vue/compiler-core'
@@ -7,6 +8,11 @@ import { DOMErrorCodes, createDOMCompilerError } from '../errors'
 
 export const transformVHtml: DirectiveTransform = (dir, node, context) => {
   const { exp, loc } = dir
+  if (node.tagType !== ElementTypes.ELEMENT) {
+    context.onError(
+      createDOMCompilerError(DOMErrorCodes.X_V_HTML_ON_INVALID_ELEMENT, loc),
+    )
+  }
   if (!exp) {
     context.onError(
       createDOMCompilerError(DOMErrorCodes.X_V_HTML_NO_EXPRESSION, loc),

packages/compiler-dom/src/transforms/vText.ts

@@ -1,5 +1,6 @@
 import {
   type DirectiveTransform,
+  ElementTypes,
   TO_DISPLAY_STRING,
   createCallExpression,
   createObjectProperty,
@@ -10,6 +11,11 @@ import { DOMErrorCodes, createDOMCompilerError } from '../errors'
 
 export const transformVText: DirectiveTransform = (dir, node, context) => {
   const { exp, loc } = dir
+  if (node.tagType !== ElementTypes.ELEMENT) {
+    context.onError(
+      createDOMCompilerError(DOMErrorCodes.X_V_TEXT_ON_INVALID_ELEMENT, loc),
+    )
+  }
   if (!exp) {
     context.onError(
       createDOMCompilerError(DOMErrorCodes.X_V_TEXT_NO_EXPRESSION, loc),

packages/compiler-ssr/src/errors.ts

@@ -17,7 +17,7 @@ export function createSSRCompilerError(
 }
 
 export enum SSRErrorCodes {
-  X_SSR_UNSAFE_ATTR_NAME = 65 /* DOMErrorCodes.__EXTEND_POINT__ */,
+  X_SSR_UNSAFE_ATTR_NAME = 67 /* DOMErrorCodes.__EXTEND_POINT__ */,
   X_SSR_NO_TELEPORT_TARGET,
   X_SSR_INVALID_AST_NODE,
 }