<slot>
Miejsce w komponencie webowym, w które trafia treść wpisana między jego znacznikami.
- Wyświetlanie
- contents
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Treść przezroczysta, wyświetlana jako treść domyślna, gdy do slotu nic nie trafi
Przykład
#<template id="course-card-template">
<style>
:host { display: block; margin-bottom: 12px; }
.card { max-width: 280px; padding: 12px 16px; border: 1px solid #8886; border-radius: 12px; }
h3, ::slotted(h3) { margin: 0 0 6px; }
</style>
<article class="card">
<slot name="title"><h3>Kurs bez nazwy</h3></slot>
<slot>Opis pojawi się wkrótce.</slot>
</article>
</template>
<course-card>
<h3 slot="title">HTML od podstaw</h3>
Zbuduj swoją pierwszą stronę w tydzień.
</course-card>
<course-card></course-card>
<script>
customElements.define('course-card', class extends HTMLElement {
constructor() {
super()
const template = document.getElementById('course-card-template')
this.attachShadow({ mode: 'open' }).append(template.content.cloneNode(true))
}
})
</script>Druga karta nie ma żadnej treści, więc sloty pokazują swoją treść domyślną.
Definicja i zastosowanie
#Element <slot> działa wewnątrz Shadow DOM, czyli wewnętrznej, odizolowanej struktury komponentu webowego. Oznacza miejsce, w którym ma się pojawić treść wpisana na stronie między znacznikami komponentu. Dzięki temu jeden komponent, na przykład karta kursu, może wyświetlać różne tytuły i opisy.
Slot nazwany (<slot name="title">) przyjmuje elementy z atrybutem slot="title", a slot bez nazwy całą pozostałą treść. To, co wpiszesz wewnątrz samego <slot>, jest treścią domyślną, widoczną wtedy, gdy do slotu nic nie trafi.
Wstawione elementy nadal należą do zwykłego DOM strony, więc stylujesz je normalnym CSS. Od wewnątrz komponentu możesz je dodatkowo ostylować selektorem ::slotted(), a na zmiany zawartości zareagować w zdarzeniu slotchange.
Składnia
#<slot name="nazwa">Treść domyślna</slot>Atrybuty
#name
tekst
Nazwa slotu. Trafiają do niego elementy komponentu z atrybutemsloto tej samej wartości. Slot bez nazwy przyjmuje całą pozostałą treść.
Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.
Więcej przykładów
#<user-badge>
<template shadowrootmode="open">
<style>
.badge { display: inline-flex; gap: 8px; padding: 4px 12px; border-radius: 999px; background: #8b5cf633; }
</style>
<span class="badge">
<slot name="level">Poziom 1</slot>
<slot>Anonim</slot>
</span>
</template>
<b slot="level">Poziom 7</b>
Ania
</user-badge>Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
slot {
display: contents;
}Obsługa przeglądarek
#Szeroko dostępne · od 2020 roku
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Nie myl elementu
<slot>z atrybutemslot. Element stoi w Shadow DOM komponentu, a atrybut na treści, którą do niego kierujesz. ::slotted()pozwala stylować tylko bezpośrednio wstawione elementy, a nie ich potomków. Głębsze style ustaw w zwykłym CSS strony.<slot>ma sens tylko wewnątrz Shadow DOM. Wstawiony w zwykły HTML strony nie robi nic szczególnego.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.