---
source: crates/rome_formatter_test/src/snapshot_builder.rs
info:
  test_file: js/multiparser-html/lit-html.js
---

# Input

```js
import { LitElement, html } from '@polymer/lit-element';

class MyElement extends LitElement {
  static get properties() {
    return {
      mood: { type: String }
    };
  }

  constructor() {
    super();
    this.mood = 'happy';
  }

  render() {
    return html`
      <style
      
      
      >
                  .mood { color: green; }
      </style
      
      
      
      >

         Web            Components         are     <span 
      
      
      class="mood"      >${
        this.mood
      
      }</span
      
           >!
    `;
  }
}

customElements.define('my-element', MyElement);

const someHtml1 = html`<div       > hello ${world} </div     >`;
const someHtml2 = /* HTML */ `<div      > hello ${world} </div     >`;

html``

html`<my-element obj=${obj}></my-element>`;

html`  <${Footer}  >footer      content<//     >  `

html`  <div />  `

html`
  <div />
`

html`<span>one</span><span>two</span><span>three</span>`;

function HelloWorld() {
  return html`
    <h3>Bar List</h3>
    ${bars.map(bar => html`
       <p>${bar}</p>
    `)}
  `;
}

const trickyParens = html`<script> f((${expr}) / 2); </script>`;
const nestedFun = /* HTML */ `${outerExpr( 1 )} <script>const tpl = html\`<div>\${innerExpr( 1 )} ${outerExpr( 2 )}</div>\`</script>`;

const closingScriptTagShouldBeEscapedProperly = /* HTML */ `
  <script>
    const html = /* HTML */ \`<script><\\/script>\`;
  </script>
`;

const closingScriptTag2 = /* HTML */ `<script>const  scriptTag='<\\/script>'; <\/script>`;

html`
 <div style="
 ${ foo}
"></div>
`
html`
 <div style=${ 
  foo
 }></div>
`

html`<div style="   color : red;
            display    :inline ">
  </div>`

html`<div style="   color : red;
${ foo}
            display    :inline ">
  </div>`
html`<div style="   color : red;
${ foo}:${bar};
            display    :inline ">
  </div>`

```


# Prettier differences

```diff
--- Prettier
+++ Rome
@@ -14,48 +14,63 @@
 
   render() {
     return html`
-      <style>
-        .mood {
-          color: green;
-        }
-      </style>
+      <style
+      
+      
+      >
+                  .mood { color: green; }
+      </style
+      
+      
+      
+      >
 
-      Web Components are <span class="mood">${this.mood}</span>!
+         Web            Components         are     <span 
+      
+      
+      class="mood"      >${this.mood}</span
+      
+           >!
     `;
   }
 }
 
 customElements.define("my-element", MyElement);
 
-const someHtml1 = html`<div>hello ${world}</div>`;
-const someHtml2 = /* HTML */ `<div>hello ${world}</div>`;
+const someHtml1 = html`<div       > hello ${world} </div     >`;
+const someHtml2 = /* HTML */ `<div      > hello ${world} </div     >`;
 
 html``;
 
 html`<my-element obj=${obj}></my-element>`;
 
-html` <${Footer}>footer content<//> `;
+html`  <${Footer}  >footer      content<//     >  `;
 
-html` <div /> `;
+html`  <div />  `;
 
-html` <div /> `;
+html`
+  <div />
+`;
 
 html`<span>one</span><span>two</span><span>three</span>`;
 
 function HelloWorld() {
   return html`
     <h3>Bar List</h3>
-    ${bars.map((bar) => html` <p>${bar}</p> `)}
+    ${bars.map(
+      (bar) => html`
+       <p>${bar}</p>
+    `,
+    )}
   `;
 }
 
-const trickyParens = html`<script>
-  f((${expr}) / 2);
-</script>`;
-const nestedFun = /* HTML */ `${outerExpr(1)}
-  <script>
-    const tpl = html\`<div>\${innerExpr(1)} ${outerExpr(2)}</div>\`;
-  </script>`;
+const trickyParens = html`<script> f((${expr}) / 2); </script>`;
+const nestedFun = /* HTML */ `${outerExpr(
+  1,
+)} <script>const tpl = html\`<div>\${innerExpr( 1 )} ${outerExpr(
+  2,
+)}</div>\`</script>`;
 
 const closingScriptTagShouldBeEscapedProperly = /* HTML */ `
   <script>
@@ -63,31 +78,26 @@
   </script>
 `;
 
-const closingScriptTag2 = /* HTML */ `<script>
-  const scriptTag = "<\\/script>";
-</script>`;
+const closingScriptTag2 = /* HTML */ `<script>const  scriptTag='<\\/script>'; <\/script>`;
 
 html`
-  <div
-    style="
+ <div style="
  ${foo}
-"
-  ></div>
+"></div>
+`;
+html`
+ <div style=${foo}></div>
 `;
-html` <div style=${foo}></div> `;
 
-html`<div
-  style="   color : red;
-            display    :inline "
-></div>`;
+html`<div style="   color : red;
+            display    :inline ">
+  </div>`;
 
-html`<div
-  style="   color : red;
+html`<div style="   color : red;
 ${foo}
-            display    :inline "
-></div>`;
-html`<div
-  style="   color : red;
+            display    :inline ">
+  </div>`;
+html`<div style="   color : red;
 ${foo}:${bar};
-            display    :inline "
-></div>`;
+            display    :inline ">
+  </div>`;
```

# Output

```js
import { LitElement, html } from "@polymer/lit-element";

class MyElement extends LitElement {
  static get properties() {
    return {
      mood: { type: String },
    };
  }

  constructor() {
    super();
    this.mood = "happy";
  }

  render() {
    return html`
      <style
      
      
      >
                  .mood { color: green; }
      </style
      
      
      
      >

         Web            Components         are     <span 
      
      
      class="mood"      >${this.mood}</span
      
           >!
    `;
  }
}

customElements.define("my-element", MyElement);

const someHtml1 = html`<div       > hello ${world} </div     >`;
const someHtml2 = /* HTML */ `<div      > hello ${world} </div     >`;

html``;

html`<my-element obj=${obj}></my-element>`;

html`  <${Footer}  >footer      content<//     >  `;

html`  <div />  `;

html`
  <div />
`;

html`<span>one</span><span>two</span><span>three</span>`;

function HelloWorld() {
  return html`
    <h3>Bar List</h3>
    ${bars.map(
      (bar) => html`
       <p>${bar}</p>
    `,
    )}
  `;
}

const trickyParens = html`<script> f((${expr}) / 2); </script>`;
const nestedFun = /* HTML */ `${outerExpr(
  1,
)} <script>const tpl = html\`<div>\${innerExpr( 1 )} ${outerExpr(
  2,
)}</div>\`</script>`;

const closingScriptTagShouldBeEscapedProperly = /* HTML */ `
  <script>
    const html = /* HTML */ \`<script><\\/script>\`;
  </script>
`;

const closingScriptTag2 = /* HTML */ `<script>const  scriptTag='<\\/script>'; <\/script>`;

html`
 <div style="
 ${foo}
"></div>
`;
html`
 <div style=${foo}></div>
`;

html`<div style="   color : red;
            display    :inline ">
  </div>`;

html`<div style="   color : red;
${foo}
            display    :inline ">
  </div>`;
html`<div style="   color : red;
${foo}:${bar};
            display    :inline ">
  </div>`;
```

# Lines exceeding max width of 80 characters
```
   81: const closingScriptTag2 = /* HTML */ `<script>const  scriptTag='<\\/script>'; <\/script>`;
```