Web komponenty – przykłady

Wprowadzają one nowe podejście do budowania aplikacji internetowych, dzięki czemu można osiągnąć większą modularność, skalowalność i reużywalność kodu. W tym artykule zgłębimy tę fascynującą technologię, omawiając jej zasady działania oraz prezentując kilka przykładów prostych web komponentów. Dodatkowo, zbadamy wady i zalety jakie posiadają web komponenty w projekcie.

Czym są web komponenty?

Web komponenty są to autonomiczne, hermetyczne elementy interfejsu użytkownika, które mogą być używane na stronach internetowych i w aplikacjach webowych. Składają się z trzech głównych technologii: Custom Elements, Shadow DOM oraz HTML Templates. Pozwalają one deweloperom tworzyć własne, niestandardowe tagi HTML, które mogą być wielokrotnie używane w różnych projektach.

Składniki web komponentów

• Custom Elements: Pozwalają na definiowanie niestandardowych elementów HTML. Możemy tworzyć własne tagi, np. <my-button> lub <custom-calendar>, które zachowują się jak standardowe tagi HTML.
• Shadow DOM: Zapewnia izolację stylów i struktury DOM dla komponentu. Pozwala na tworzenie zamkniętego środowiska dla komponentu, co zapobiega konfliktom stylów i zagnieżdżaniu elementów.
• HTML Templates: To mechanizm pozwalający na zdefiniowanie fragmentu kodu HTML, który nie jest renderowany na starcie. Możemy używać go jako szablonu dla naszych web komponentów.

Przykłady web komponentów

Przycisk z licznikiem

class CounterButton extends HTMLElement {
  constructor() {
    super();
    this.count = 0;

    const template = document.createElement('template');
    template.innerHTML = `
      <button>Click me</button>
      <span>Clicked: ${this.count} times</span>
    `;

    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.appendChild(template.content.cloneNode(true));

    this.button = shadowRoot.querySelector('button');
    this.span = shadowRoot.querySelector('span');

    this.button.addEventListener('click', () => {
      this.count++;
      this.span.textContent = `Clicked: ${this.count} times`;
    });
  }
}

customElements.define('counter-button', CounterButton);

Prosty kalendarz

class SimpleCalendar extends HTMLElement {
  constructor() {
    super();

    const template = document.createElement('template');
    template.innerHTML = `
      <div class="calendar">
        <div class="header">August 2023</div>
        <div class="days">
          <!-- Days of the month go here -->
        </div>
      </div>
    `;

    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.appendChild(template.content.cloneNode(true));

    // Populate days...
  }
}

customElements.define('simple-calendar', SimpleCalendar);

Nawigacja tabów

class TabNavigation extends HTMLElement {
  constructor() {
    super();

    const template = document.createElement('template');
    template.innerHTML = `
      <div class="tabs">
        <slot></slot>
      </div>
    `;

    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.appendChild(template.content.cloneNode(true));
  }
}

customElements.define('tab-navigation', TabNavigation);

Zalety web komponentów

• Hermetyzacja: Komponenty są odizolowane od reszty strony, co minimalizuje ryzyko konfliktów nazw i stylów.
• Modularność i reużywalność: Można tworzyć komponenty, które są niezależne od siebie i mogą być używane w różnych projektach.
• Łatwa współpraca: Dzięki jasno zdefiniowanym interfejsom komponentów, różni deweloperzy mogą pracować nad różnymi komponentami równocześnie.

Wsparcie przeglądarek

Stan na 04.08.2023 – WebKit wspiera web komponenty jedynie częściowo.

Podsumowanie

Web komponenty stanowią potężne narzędzie dla twórców internetowych, umożliwiające tworzenie modularnych i reużywalnych komponentów interfejsu użytkownika. Choć nie pozbawione wad, ich zalety przewyższają ograniczenia, co sprawia, że stanowią obiecującą przyszłość w dziedzinie tworzenia aplikacji webowych. Pamiętaj, że podane przykłady to tylko niewielki wycinek możliwości, jakie oferują web komponenty, i zachęcam do eksperymentowania z nimi samodzielnie.