From 062c0802c2817e027402a74eca2e072af9c8dbb9 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Thu, 8 Nov 2018 15:50:11 +0800
Subject: [PATCH 1/2] test: add tests

---
 .../html_vue/__snapshots__/jsfmt.spec.js.snap  | 18 ++++++++++++++++++
 tests/html_vue/self_closing.vue                |  7 +++++++
 2 files changed, 25 insertions(+)

diff --git a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
index cfb1254a31cb..30093ba46b30 100644
--- a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
@@ -960,6 +960,13 @@ exports[`self_closing.vue - vue-verify 1`] = `
 <script>
 foo( )
 </script>
+
+<div class="container">
+  <HomeH />
+  <HomeA />
+  <HomeX />
+  <HomeY />
+</div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <template>
   <div />
@@ -969,6 +976,8 @@ foo( )
 foo();
 </script>
 
+<div class="container"><HomeH /> <HomeA /> <HomeX /> <HomeY /></div>
+
 `;
 
 exports[`self_closing.vue - vue-verify 2`] = `
@@ -979,6 +988,13 @@ exports[`self_closing.vue - vue-verify 2`] = `
 <script>
 foo( )
 </script>
+
+<div class="container">
+  <HomeH />
+  <HomeA />
+  <HomeX />
+  <HomeY />
+</div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <template>
   <div />
@@ -988,6 +1004,8 @@ foo( )
 foo();
 </script>
 
+<div class="container"><HomeH /> <HomeA /> <HomeX /> <HomeY /></div>
+
 `;
 
 exports[`self_closing_style.vue - vue-verify 1`] = `
diff --git a/tests/html_vue/self_closing.vue b/tests/html_vue/self_closing.vue
index f6c519de6279..2edb43fb4d8e 100644
--- a/tests/html_vue/self_closing.vue
+++ b/tests/html_vue/self_closing.vue
@@ -5,3 +5,10 @@
 <script>
 foo( )
 </script>
+
+<div class="container">
+  <HomeH />
+  <HomeA />
+  <HomeX />
+  <HomeY />
+</div>

From 557b482d7077393cc9b108842a092686d85cc7db Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Thu, 8 Nov 2018 15:50:45 +0800
Subject: [PATCH 2/2] feat(html): treat capital element as custom element

---
 src/language-html/utils.js                         |  6 +++++-
 .../__snapshots__/jsfmt.spec.js.snap               |  5 ++++-
 tests/html_vue/__snapshots__/jsfmt.spec.js.snap    | 14 ++++++++++++--
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/language-html/utils.js b/src/language-html/utils.js
index 9dd78fecf90c..efa22ccebaab 100644
--- a/src/language-html/utils.js
+++ b/src/language-html/utils.js
@@ -252,7 +252,11 @@ function isCustomElementWithSurroundingLineBreak(node) {
 }
 
 function isCustomElement(node) {
-  return node.type === "element" && !node.namespace && node.name.includes("-");
+  return (
+    node.type === "element" &&
+    !node.namespace &&
+    (node.name.includes("-") || /[A-Z]/.test(node.name[0]))
+  );
 }
 
 function hasSurroundingLineBreak(node) {
diff --git a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
index ec16f2fce22d..89c4b351537b 100644
--- a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
@@ -141,7 +141,10 @@ and HTML5 Apps. It also documents Mozilla products, like Firefox OS."
   data-index-number="12314"
   data-parent="cars"
 ></article>
-<X> </X> <X a="1"> </X> <X a="1" b="2"> </X> <X a="1" b="2" c="3"> </X>
+<X> </X>
+<X a="1"> </X>
+<X a="1" b="2"> </X>
+<X a="1" b="2" c="3"> </X>
 <p
   class="
     foo
diff --git a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
index 30093ba46b30..030f4cdbaa2c 100644
--- a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
@@ -976,7 +976,12 @@ foo( )
 foo();
 </script>
 
-<div class="container"><HomeH /> <HomeA /> <HomeX /> <HomeY /></div>
+<div class="container">
+  <HomeH />
+  <HomeA />
+  <HomeX />
+  <HomeY />
+</div>
 
 `;
 
@@ -1004,7 +1009,12 @@ foo( )
 foo();
 </script>
 
-<div class="container"><HomeH /> <HomeA /> <HomeX /> <HomeY /></div>
+<div class="container">
+  <HomeH />
+  <HomeA />
+  <HomeX />
+  <HomeY />
+</div>
 
 `;