Component Test

by johan polson

HTML

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.8/css/bootstrap.min.css"
  integrity="sha512-2bBQCjcnw658Lho4nlXJcc6WkV/UxpE/sAokbXPxQNGqmNdQrWqtw26Ns9kFF/yG792pKR1Sx8/Y1Lf1XN4GKA=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
/>

<template id="accordion-component-template">
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.8/css/bootstrap.min.css"
    integrity="sha512-2bBQCjcnw658Lho4nlXJcc6WkV/UxpE/sAokbXPxQNGqmNdQrWqtw26Ns9kFF/yG792pKR1Sx8/Y1Lf1XN4GKA=="
    crossorigin="anonymous"
    referrerpolicy="no-referrer"
  />

  <div class="accordion">
    <div class="accordion-item">
      <h2 class="accordion-header">
        <button id="button" class="accordion-button" type="button">
            <slot name="button" class="hw-text"></slot>
        </button>
      </h2>
      <div id="target" class="accordion-collapse collapse">
        <div class="accordion-body">
          <slot></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<div class="container">
  <accordion-component text="textaaa" expanded>
    <h1 slot="button">Hello Default!</h1>
    <p>abaddd</p>
  </accordion-component>
</div>

JavaScript

class AccordionComponent extends HTMLElement {
  constructor() {
    super();
    this.text= "";
    this.expanded = 'false';
  }

  static get observedAttributes() {
    return ['text', 'expanded'];
  }

  connectedCallback() {
    const shadow = this.attachShadow({ mode: 'closed' });

    shadow.append(
      document.getElementById('accordion-component-template').content.cloneNode(true),
    );

    const button = shadow.getElementById('button');
    button.innerHTML += this.text;
    const targetElement = shadow.getElementById('target');

    if (this.expanded !== '') {
      button.classList.remove('collapsed');
      targetElement.classList.add('show');
    }

    const SetMef = () => {
      if (targetElement.classList.contains('show')) {
        button.classList.add('collapsed');
        targetElement.classList.remove('show');
      } else {
        button.classList.remove('collapsed');
        targetElement.classList.add('show');
      }
    };

    SetMef();
    button.parentElement.addEventListener('click', () => SetMef());
  }

  attributeChangedCallback(property, oldValue, newValue) {
    if (oldValue === newValue) return;
    this[property] = newValue;
  }
}

customElements.define('accordion-component', AccordionComponent);