1 files changed, 15 insertions, 0 deletions
diff --git a/config/vue3migration/compiler.js b/config/vue3migration/compiler.js
index bb92e1e2356..a2c82584227 100644
--- a/config/vue3migration/compiler.js
+++ b/config/vue3migration/compiler.js
@@ -1,5 +1,7 @@
 const { parse, compile: compilerDomCompile } = require('@vue/compiler-dom');
 
+const COMMENT_NODE_TYPE = 3;
+
 const getPropIndex = (node, prop) => node.props?.findIndex((p) => p.name === prop) ?? -1;
 
 function modifyKeysInsideTemplateTag(templateNode) {
@@ -26,6 +28,19 @@ module.exports = {
   parse,
   compile(template, options) {
     const rootNode = parse(template, options);
+
+    // We do not want to switch to whitespace: collapse mode which is Vue.js 3 default
+    // It will be too devastating to codebase
+
+    // However, without `whitespace: condense` Vue will treat spaces between comments
+    // and nodes itself as text nodes, resulting in multi-root component
+    // For multi-root component passing classes / attributes fallthrough will not work
+
+    // See https://github.com/vuejs/core/issues/7909 for details
+
+    // To fix that we simply drop all component comments only on top-level
+    rootNode.children = rootNode.children.filter((n) => n.type !== COMMENT_NODE_TYPE);
+
     const pendingNodes = [rootNode];
     while (pendingNodes.length) {
       const currentNode = pendingNodes.pop();