Dam Accordian Web Component

dam-accordion.html

  <template id="dam-accordian-template">
    <style>
      :host {
        display: flex;
        flex-direction: column;
        font-family: sans-serif;
        border: 1px solid #DDD;
        border-radius: 2px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.25);
        transition: box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      }
      :host(:hover) {
        box-shadow: 0 1px 5px rgba(0,0,0,0.35);
      }
      ::slotted(.header) {
        display: flex;
        justify-content: space-between;
        padding: 1rem;
        font-size: 1.25rem;
        border-bottom: 1px solid #DDD;
      }
      ::slotted(.container) {
        margin: 0;
        box-sizing: border-box;
        max-height: 0;
        font-size: 1.5rem;
        overflow: hidden;
        transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      }
      :host([open="true"]) > ::slotted(.container) {
        max-height: 999px;
      }
    </style>
    <slot name=header>
      <slot name=button>Open</slot>
    </slot>
    <slot name=container>
    </slot>
  </template>

  <dam-accordian open=false>
    <header slot="header" class=header>
      Accordian
      <button slot=button class=button>▼</button>
    </header>
    <div
      class=container
      slot=container
    >
      <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
      </ul>
    </div>
  </dam-accordian>

  <dam-accordian open=true>
    <header slot="header" class=header>
      Kole
      <button slot=button class=button>▼</button>
    </header>
    <div
      class=container
      slot=container
    >
      <ul class="list">
        <li>is </li>
        <li>the</li>
        <li>best</li>
        <li>ever!</li>
      </ul>
    </div>
  </dam-accordian>

  <script type="module">
    class DamAccordion extends HTMLElement {
      constructor() {
        super()
        this.toggle = this.toggle.bind(this)
        const template = document.getElementById('dam-accordian-template')
        const templateContent = template.content
        const shadow = this.attachShadow({mode: 'open'})
        shadow.appendChild(templateContent.cloneNode(true))
      }

      static get observedAttributes() {
        return ['open']
      }

      toggle(e) {
        let open = this.getAttribute('open')
        if (open === 'false') {
          this.setAttribute('open', true)
        } else {
          this.setAttribute('open', false)
        }
      }

      attributeChangedCallback(name, o, n) {
        if (name === 'open') {
          const btn = this.querySelector('[slot=button]')
          if (n === 'true') {
            btn.textContent = '▲'
          } else {
            btn.textContent = '▼'
          }
        }
      }

      connectedCallback() {
        if (this.isConnected) {
          this.addEventListener('click', this.toggle)
        }
      }
    }
    customElements.define('dam-accordian', DamAccordion)
  </script>