feat(html): treat capital element as custom element (#5395)

Custom element: keep it on its own line if both leading/trailing line breaks exist

src/language-html/utils.js

@@ -254,7 +254,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) {

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

tests/html_vue/__snapshots__/jsfmt.spec.js.snap

@@ -1034,6 +1034,13 @@ exports[`self_closing.vue - vue-verify 1`] = `
 <script>
 foo( )
 </script>
+
+<div class="container">
+  <HomeH />
+  <HomeA />
+  <HomeX />
+  <HomeY />
+</div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <template>
   <div />
@@ -1043,6 +1050,13 @@ foo( )
 foo();
 </script>
 
+<div class="container">
+  <HomeH />
+  <HomeA />
+  <HomeX />
+  <HomeY />
+</div>
+
 `;
 
 exports[`self_closing.vue - vue-verify 2`] = `
@@ -1053,6 +1067,13 @@ exports[`self_closing.vue - vue-verify 2`] = `
 <script>
 foo( )
 </script>
+
+<div class="container">
+  <HomeH />
+  <HomeA />
+  <HomeX />
+  <HomeY />
+</div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <template>
   <div />
@@ -1062,6 +1083,13 @@ foo( )
 foo();
 </script>
 
+<div class="container">
+  <HomeH />
+  <HomeA />
+  <HomeX />
+  <HomeY />
+</div>
+
 `;
 
 exports[`self_closing_style.vue - vue-verify 1`] = `

tests/html_vue/self_closing.vue

@@ -5,3 +5,10 @@
 <script>
 foo( )
 </script>
+
+<div class="container">
+  <HomeH />
+  <HomeA />
+  <HomeX />
+  <HomeY />
+</div>