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>`;