fix(compiler-core): bail out to array children when the element has custom directives + only one text child node (#3757)

packages/compiler-core/src/transforms/transformText.ts

@@ -64,6 +64,16 @@ export const transformText: NodeTransform = (node, context) => {
           (node.type === NodeTypes.ROOT ||
             (node.type === NodeTypes.ELEMENT &&
               node.tagType === ElementTypes.ELEMENT &&
+              // #3756
+              // custom directives can potentially add DOM elements arbitrarily,
+              // we need to avoid setting textContent of the element at runtime
+              // to avoid accidentally overwriting the DOM elements added
+              // by the user through custom directives.
+              !node.props.find(
+                p =>
+                  p.type === NodeTypes.DIRECTIVE &&
+                  !context.directiveTransforms[p.name]
+              ) &&
               // in compat mode, <template> tags with no special directives
               // will be rendered as a fragment so its children must be
               // converted into vnodes.