import "./site.css";

function setup() {
  let templates = document.querySelectorAll("template[simple]");
  templates.forEach((template) => {
    let templateId = template.getAttribute("id");
    let templateContent = template.content;

    customElements.define(
      templateId,
      class extends HTMLElement {
        constructor() {
          super();
          this.appendChild(templateContent.cloneNode(true));
          this.slots = this.querySelectorAll("slot");
        }

        connectedCallback() {
          let toremove = [];
          this.slots.forEach((tslot) => {
            let slotName = tslot.getAttribute("name");
            let slotContent = this.querySelector(`[slot="${slotName}"]`);
            if (slotContent) {
              tslot.replaceWith(slotContent.cloneNode(true));
              toremove.push(slotContent);
            }
          });
          toremove.forEach((element) => {
            element.remove();
          });
        }
      },
    );
  });
}

export { setup };
