JavaScript Academy · Lekcja

Szablony i sloty

Proszę komponować komponenty za pomocą template i slot.

Szablony i sloty to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 4 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.

Element template

Element <template> przechowuje nieaktywne HTML, które jest parsowane, ale nie renderowane. Jego zawartość pozostaje poza stroną, dopóki nie zostanie sklonowana i wstawiona, dzięki czemu element ten doskonale nadaje się do wielokrotnego użycia znaczników.

Uzyskiwanie dostępu do zawartości template

Elementy potomne template znajdują się we właściwości .content, która jest obiektem DocumentFragment. Skrypty, obrazy i style znajdujące się w środku nie są wykonywane ani ładowane, dopóki template nie zostanie wstawiony.

// <template id="card"><p>Hi</p></template>
const tpl = document.getElementById('card');
const fragment = tpl.content; // DocumentFragment

Klonowanie template

Użyj importNode lub cloneNode(true), aby skopiować zawartość template, a następnie wstaw klon. Klonowanie pozwala niewielkim kosztem tworzyć wiele kopii.

const tpl = document.getElementById('card');
const clone = tpl.content.cloneNode(true);
document.body.appendChild(clone);

Template w komponentach

Elementy niestandardowe często definiują template raz i klonują go do swojego korzenia cienia dla każdej instancji. Jest to szybsze niż ponowne parsowanie ciągu HTML za każdym razem.

const tpl = document.createElement('template');
tpl.innerHTML = '<p>Reusable content</p>';

class MyCard extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: 'open' });
    root.appendChild(tpl.content.cloneNode(true));
  }
}
customElements.define('my-card', MyCard);

Czym jest slot

<slot> to symbol zastępczy wewnątrz drzewa cienia, do którego przekazywana jest własna zawartość elementu potomnego (jego light DOM). Dzięki temu użytkownicy mogą przekazywać własną zawartość do komponentu.

// Shadow root markup:
// <div class="box"><slot></slot></div>

// Usage:
// <my-card>This text fills the slot</my-card>

Zawartość domyślnego slotu

Zawartość umieszczona między znacznikami <slot> pełni funkcję zastępczą. Jest wyświetlana tylko wtedy, gdy użytkownik nie dostarczy pasującej zawartości.

// <slot>No content provided</slot>
// If the user supplies children, they replace the fallback.

Nazwane sloty

Wiele slotów może współistnieć dzięki atrybutowi name. Elementy potomne light DOM są przypisywane do slotu za pomocą atrybutu slot.

// Shadow root:
// <header><slot name="title"></slot></header>
// <section><slot name="body"></slot></section>

// Usage:
// <my-card>
//   <h2 slot="title">Hello</h2>
//   <p slot="body">World</p>
// </my-card>

Domyślny (nienazwany) slot

Slot bez atrybutu name jest slotem domyślnym. Każdy element potomny bez atrybutu slot jest do niego przekazywany. Można łączyć jeden slot domyślny z kilkoma nazwanymi slotami.

// <slot name="header"></slot>
// <slot></slot>  <!-- default: catches everything else -->

Stylowanie zawartości przekazywanej przez slot

Użyj pseudoelementu ::slotted(), aby stylować elementy potomne przekazane przez slot z poziomu stylów cienia. Dopasowuje on tylko węzły przekazane bezpośrednio.

// Inside shadow <style>:
// ::slotted(p) { margin: 0; color: gray; }
// ::slotted(h2) { font-size: 1.5rem; }

Zdarzenie slotchange

Slot emituje zdarzenie slotchange, gdy zmieniają się przypisane do niego węzły. Należy go nasłuchiwać, aby reagować na dodawanie lub usuwanie przekazanej zawartości.

const slot = this.shadowRoot.querySelector('slot');
slot.addEventListener('slotchange', () => {
  const nodes = slot.assignedNodes();
  console.log('slot now has', nodes.length, 'nodes');
});

Template i sloty razem

Template definiuje strukturę raz, a sloty zapewniają jej elastyczność, pozwalając użytkownikom komponentu wstawiać własną zawartość. Razem stanowią podstawę przejrzystych, wielokrotnego użytku i konfigurowalnych Web Components.

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat template i slotów.

Podsumowanie

Poznałeś template i sloty:

<template> przechowuje nieaktywne, wielokrotnego użytku znaczniki we właściwości .content.
Przed wstawieniem należy klonować zawartość za pomocą cloneNode(true).
<slot> przekazuje light DOM do drzewa cienia.
Nazwane sloty używają atrybutu name oraz atrybutu slot elementu potomnego.
::slotted() styluje przekazane węzły, a slotchange reaguje na aktualizacje.

Ukończyłeś część dotyczącą Web Components. Następnie poznasz API Intersection Observer.

Często zadawane pytania

Czy lekcja „Szablony i sloty” jest bezpłatna?

Tak — pełny tekst „Szablony i sloty” 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 „Szablony i sloty”?

Proszę komponować komponenty za pomocą template i slot. Ć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 4 z 4.

Ile czasu zajmuje lekcja „Szablony i sloty”?

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

← Powrót do JavaScript Academy