Fix: recognize self-closing elements

Author: mysticatea

lib/transform-html.js

@@ -626,7 +626,7 @@ class HTMLTransformer {
      * Transform the given parse5's element node.
      * @param {ASTNode} parent The parent node.
      * @param {module:parse5.AST.Element} node The element node to transform.
-     * @returns {ASTNode} The transformed node.
+     * @returns {ASTNode|ASTNode[]} The transformed node.
      */
     visitElementNode(parent, node) {
         const start = node.__location.startOffset
@@ -662,8 +662,25 @@ class HTMLTransformer {
             }
         }
 
-        result.endTag = this.createVEndTag(result, node)
+        if (result.startTag.selfClosing) {
+            // Vue.js recognizes self-closing elements as different to HTML.
+            // Move children to the same level of this node.
+            const results = [result]
+            const startTag = result.startTag
+            result.range[1] = startTag.range[1]
+            result.loc.end.column = startTag.loc.end.column
+            result.loc.end.line = startTag.loc.end.line
+
+            for (const child of result.children) {
+                child.parent = parent
+                results.push(child)
+            }
+            result.children = []
 
+            return results
+        }
+
+        result.endTag = this.createVEndTag(result, node)
         return result
     }