diff --git a/packages/runtime-dom/src/modules/props.ts b/packages/runtime-dom/src/modules/props.ts index 7b7b700e048..4dfcee6aee6 100644 --- a/packages/runtime-dom/src/modules/props.ts +++ b/packages/runtime-dom/src/modules/props.ts @@ -1,9 +1,6 @@ -// __UNSAFE__ -// Reason: potentially setting innerHTML. -// This can come from explicit usage of v-html or innerHTML as a prop in render - import { DeprecationTypes, compatUtils, warn } from '@vue/runtime-core' import { includeBooleanAttr } from '@vue/shared' +import { unsafeToTrustedHTML } from '../nodeOps' // functions. The user is responsible for using them with only trusted content. export function patchDOMProp( @@ -12,11 +9,15 @@ export function patchDOMProp( value: any, parentComponent: any, ): void { + // __UNSAFE__ + // Reason: potentially setting innerHTML. + // This can come from explicit usage of v-html or innerHTML as a prop in render if (key === 'innerHTML' || key === 'textContent') { // null value case is handled in renderer patchElement before patching // children - if (value == null) return - el[key] = value + if (value != null) { + el[key] = key === 'innerHTML' ? unsafeToTrustedHTML(value) : value + } return } diff --git a/packages/runtime-dom/src/nodeOps.ts b/packages/runtime-dom/src/nodeOps.ts index 8ed70c7d330..d7422bf6164 100644 --- a/packages/runtime-dom/src/nodeOps.ts +++ b/packages/runtime-dom/src/nodeOps.ts @@ -31,9 +31,8 @@ if (tt) { // This function merely perform a type-level trusted type conversion // for use in `innerHTML` assignment, etc. // Be careful of whatever value passed to this function. -const unsafeToTrustedHTML: (value: string) => TrustedHTML | string = policy - ? val => policy.createHTML(val) - : val => val +export const unsafeToTrustedHTML: (value: string) => TrustedHTML | string = + policy ? val => policy.createHTML(val) : val => val export const svgNS = 'http://www.w3.org/2000/svg' export const mathmlNS = 'http://www.w3.org/1998/Math/MathML'