JavaScript Academy · Lekcja

Definiowanie elementów niestandardowych

Proszę rejestrować elementy za pomocą API customElements.

Definiowanie elementów niestandardowych to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Czym są elementy niestandardowe

Elementy niestandardowe umożliwiają definiowanie własnych tagów HTML obsługiwanych przez klasy JavaScript. Zamiast łączyć wiele elementów div, można utworzyć wielokrotnego użytku, samodzielny komponent, taki jak <user-card>.

Są częścią standardu Web Components.
Działają natywnie w przeglądarkach i nie wymagają frameworka.
Nazwa elementu niestandardowego musi zawierać łącznik (np. my-button).

Rejestr customElements

Przeglądarka udostępnia globalny rejestr pod adresem window.customElements. Nowy tag rejestruje się przez wywołanie customElements.define(name, constructor).

Po zdefiniowaniu każdy pasujący tag w dokumencie zostaje przekształcony w instancję danej klasy.

// Register a tag named 'hello-world'
customElements.define('hello-world', HelloWorld);

// After this, every <hello-world> in the page
// becomes an instance of the HelloWorld class.

Rozszerzanie HTMLElement

Element niestandardowy jest klasą, która extends HTMLElement. Klasa bazowa zapewnia elementowi wszystkie standardowe możliwości DOM, takie jak atrybuty, zdarzenia i stylowanie.

W konstruktorze zawsze należy najpierw wywołać super(), aby element został prawidłowo zainicjalizowany.

class HelloWorld extends HTMLElement {
  constructor() {
    super(); // required, sets up the element
  }
}

customElements.define('hello-world', HelloWorld);

Renderowanie zawartości

Wewnątrz elementu można ustawić this.innerHTML lub użyć metod DOM do utworzenia zawartości. Często stosuje się renderowanie w momencie dołączenia elementu do strony.

class HelloWorld extends HTMLElement {
  connectedCallback() {
    this.innerHTML = '<p>Hello from a custom element!</p>';
  }
}

customElements.define('hello-world', HelloWorld);

Używanie elementu w kodzie HTML

Po zarejestrowaniu własnego tagu można używać go tak samo jak dowolnego wbudowanego elementu. Można umieścić go bezpośrednio w kodzie znaczników albo utworzyć za pomocą document.createElement.

// In HTML:
// <hello-world></hello-world>

// Or in JavaScript:
const el = document.createElement('hello-world');
document.body.appendChild(el);

Zasady konstruktora

Konstruktor jest uruchamiany podczas tworzenia instancji. Obowiązują ścisłe zasady:

Najpierw należy wywołać super().
Nie należy tutaj sprawdzać ani dodawać atrybutów lub elementów potomnych.
Prace związane z DOM należy odłożyć do connectedCallback.

Konstruktor powinien służyć wyłącznie do ustawienia stanu początkowego i skonfigurowania odbiorników zdarzeń.

class CounterButton extends HTMLElement {
  constructor() {
    super();
    this.count = 0; // safe: just internal state
  }
}

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

Dodawanie zachowania

Ponieważ ten element jest rzeczywistym węzłem DOM, można do niego dołączać nasłuchiwacze zdarzeń i aktualizować jego zawartość w reakcji na interakcję.

class CounterButton extends HTMLElement {
  constructor() {
    super();
    this.count = 0;
  }
  connectedCallback() {
    this.textContent = 'Clicked 0 times';
    this.addEventListener('click', () => {
      this.count++;
      this.textContent = 'Clicked ' + this.count + ' times';
    });
  }
}
customElements.define('counter-button', CounterButton);

Wymóg użycia łącznika

Nazwy elementów niestandardowych muszą zawierać łącznik. Gwarantuje to, że nigdy nie będą kolidować z obecnymi ani przyszłymi wbudowanymi elementami HTML.

my-widget jest prawidłową nazwą.
mywidget jest nieprawidłową nazwą i powoduje błąd.
W nazwach wielkość liter nie ma znaczenia, ale zapisuje się je małymi literami.

// Valid:
customElements.define('app-header', AppHeader);

// Invalid - throws SyntaxError (no hyphen):
// customElements.define('appheader', AppHeader);

whenDefined i get

Dwie przydatne metody rejestru:

customElements.get(name) zwraca konstruktor albo undefined, jeśli element nie został zarejestrowany.
customElements.whenDefined(name) zwraca Promise, który zostaje rozstrzygnięty po zdefiniowaniu elementu.

customElements.whenDefined('hello-world').then(() => {
  console.log('hello-world is ready to use');
});

const Ctor = customElements.get('hello-world');

Definiowanie tylko raz

Każdą nazwę można zarejestrować tylko raz. Wywołanie define z już używaną nazwą powoduje błąd. Współdzielone moduły powinny zabezpieczać się przed podwójną rejestracją.

if (!customElements.get('hello-world')) {
  customElements.define('hello-world', HelloWorld);
}

Dlaczego elementy niestandardowe są ważne

Elementy niestandardowe zapewniają niezależny od frameworka, hermetyzowany i wielokrotnego użytku interfejs użytkownika. Umożliwiają:

Standaryzację ponownego użycia komponentów w dowolnym stosie technologicznym.
Integrację z własnym cyklem życia przeglądarki.
Naturalne połączenie z Shadow DOM i template (omówionymi później).

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat definiowania elementów niestandardowych.

Podsumowanie

Dowiedziałeś się, jak definiować elementy niestandardowe:

customElements.define(name, class) rejestruje znacznik.
Klasa extends HTMLElement dziedziczy po HTMLElement i najpierw wywołuje super().
Nazwy muszą zawierać łącznik.
Zawartość należy renderować w connectedCallback, a nie w konstruktorze.
get i whenDefined pomagają sprawdzać stan rejestracji.

Następnie poznamy pełny cykl życia elementu niestandardowego.

Często zadawane pytania

Czy lekcja „Definiowanie elementów niestandardowych” jest bezpłatna?

Tak — pełny tekst „Definiowanie elementów niestandardowych” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Definiowanie elementów niestandardowych”?

Proszę rejestrować elementy za pomocą API customElements. Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Definiowanie elementów niestandardowych”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?

Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Definiowanie elementów niestandardowych
Callbacki cyklu życia
Shadow DOM i hermetyzacja
Szablony i sloty

← Powrót do JavaScript Academy