<template id="my-button-template">
  <button>Hollo World!</button>
</template>
<script>
  class MyButton extends HTMLElement {
    constructor() {
      super();
      const template = document.getElementById('my-button-template').content;
      const shadowRoot = this.attachShadow({mode: 'open'}).appendChild(template.cloneNode(true));
    }
  }
  customElements.define('my-button', MyButton);
</script>

<my-button></my-button>

<template id="concert-ticket">
  <div class="concert">
    <img src="artist.jpg">
    <p class="title"></p>
    <p class="price"></p>
  </div>
</template>
<script>
  const ticketTemplate = document.getElementById("concert-ticket').content;
  // テンプレートをdeep copyして子要素まで複製
  const clone = document.importNode(ticketTemplate, true);
  clone.querySelector('.title').textContent = 'New Live';
  clone.querySelector('.price').textContent = '￥12,000';
  document.body.appendChild(clone); // 복제된 템플릿의 값을 수정하여 삽입
</script>

import {html, css, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';
 
@customElement('simple-greeting') // 1. Custom Elements
export class SimpleGreeting extends LitElement {
  static styles = css`p { color: blue }`; // 2. Scoped styles
 
  @property() // 3. Reactive properties
  name = 'Somebody';
 
  render() {
    return html`<p>Hello, ${this.name}!</p>`; 4. // Declarative templates
  }
}

<simple-greeting name="World"></simple-greeting>

// header 親コンポーネント
@customElement('header-pc')
export class HeaderPc extends LitElement {
  @property({ type: Boolean })
  'is-login': boolean = false
 
  @property({ type: String })
  language: string = ''
 
  ...
 
  render() {
      return html`
        <header-bar-pc
          language=${this.language}
          country=${this.country}
          ...
        ></header-bar-pc>
        ${this['show-line-menu']
          ? html`
              <header-nav-pc
                service=${this.service}
                z-index=${this['z-index']}
              ></header-nav-pc>
            `
          : html``}
      `
    }
}
 
declare global {
  interface HTMLElementTagNameMap {
    'header-pc': HeaderPc
  }
}

// header bar コンポーネント
@customElement('header-bar-pc')
export class HeaderBarPC extends LitElement {
  @property({ type: Boolean })
  'is-login': boolean = false
 
  @property({ type: Number })
  notice: number = 0
 
  @property({ type: String })
  language: string = ''
 
  ...
 
  @state()
  _showNavMainMenu = false
 
  willUpdate() {
    ...
  }
 
  setShowNavHelpMenu() {
    this._showNavMainMenu = false
    ...
  }
 
  setShowNavMainMenu() {
    ...
  }
 
  faderHandler(event: Event) {
    event.type === 'click' && this._showNavMainMenu
      ? (this._showNavMainMenu = false)
      : (this._showNavHelpMenu = false)
    this.requestUpdate()
  }
 
  clickHandler() {
    ...
  }
 
  ...
 
  static get styles() {
    return [
      resetCss,
      css`
        .header-bar {
          background-color: ${colors.mainColor};
          color: ${colors.white};
          width: 100%;
        }
        .header-bar-wrapper {
          margin: 0 auto;
          position: relative;
          max-width: 1024px;
          width: 100%;
        }
        ...
      `,
    ]
  }
 
  render() {
    const mainMenuBtnStyles = {
      backgroundColor: `${colors.subColor}`,
    }
    const pulldownBgStyles = {
      backgroundColor: `${colors.subColor}`,
    }
 
    return html`
      <header class="header-bar">
        <div class="header-bar-wrapper">
          <div class="header-bar-content">
            ...
                    <div class="pull-down-i18n">
                      <div class="header-pull-down-wrapper">
                        <div
                          class="header-pull-down-title"
                          @mouseover=${this.pulldownLanguageHandler}
                          style=${this._showPullDownLanguage
                            ? styleMap(pulldownBgStyles)
                            : ''}
                        >
                          <span class="header-pull-down-name"
                            >${this.language}</span
                          >
                        </div>
        ...
        <div
          class="header-bar-fader"
          @click=${this.faderHandler}
          @mouseover=${this.faderHandler}
          style=${this._showNavMainMenu || this._showNavHelpMenu
            ? styleMap({
                display: 'block',
                marginTop: this._showNavHelpMenu ? '-60px' : '',
              })
            : ''}
        ></div>
      </header>
    `
  }
}
 
declare global {
  interface HTMLElementTagNameMap {
    'header-bar-pc': HeaderBarPC
  }
}