Attractive Element

[eelcoj]

Make custom elements great again…

AttractiveElement is a base class for custom elements. It scopes Attractive to the component, so @click, @target, gates and triggers work inside the component.

Simple example:

class Tabs extends AttractiveElement {
  connect() {
    this.#show("details");
  }

  select(element, { dataset }) {
    this.#show(dataset.panel);
  }

  #show(name) {
    this.targets(".panel").forEach((panel) => (panel.hidden = true));

    this.target(name).hidden = false;
  }
}

customElements.define("ui-tabs", Tabs);

Usage:

<ui-tabs>
  <nav>
    <button @click="select" data-panel="details">Details</button>
    <button @click="select" data-panel="settings">Settings</button>
  </nav>

  <div id="details" class="panel">…</div>
  <div id="settings" class="panel" hidden>…</div>
</ui-tabs>