Elementi slot per la distribuzione dei contenuti
Proiettare il contenuto dell’host nel DOM shadow con slot denominati e predefiniti
Elementi slot per la distribuzione dei contenuti è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.
Light DOM e Shadow DOM
I figli scritti all'interno di un custom element nell'HTML formano il suo "light DOM": non fanno parte dello shadow tree. Per impostazione predefinita, il browser non li visualizza; lo shadow tree deve richiederli esplicitamente tramite <slot>.
Lo slot predefinito
Un elemento <slot> all'interno dello shadow tree indica il punto in cui devono apparire i figli del light DOM. Se non ha un nome, è lo slot predefinito e accetta qualsiasi figlio diretto dell'host.
// Shadow:
<div class="frame">
<slot></slot>
</div>
// Usage:
<my-card>
<p>This paragraph appears inside the frame</p>
</my-card>Slot denominati
È possibile indirizzare più slot in base al nome. Lo shadow tree dichiara <slot name="header">; l'utilizzatore opta per quello slot con <h1 slot="header">. I figli con un attributo slot corrispondente riempiono quello slot; i figli senza corrispondenza finiscono nello slot predefinito.
// Shadow:
<header><slot name="header"></slot></header>
<main><slot></slot></main>
// Usage:
<my-card>
<h1 slot="header">Title</h1>
<p>Body</p>
</my-card>Contenuto di fallback dello slot
Il contenuto tra i tag dello slot viene visualizzato solo quando a quello slot non è assegnato nulla: <slot>No content provided</slot>. Lo utilizzi per mostrare un testo segnaposto o istruzioni quando gli slot sono vuoti.
Ereditarietà degli stili attraverso gli slot
I figli inseriti negli slot restano nel light DOM ed ereditano gli stili dal documento principale, non dallo shadow tree. Utilizzi il pseudo-elemento ::slotted() dall'interno dello shadow tree per stilizzarli: ::slotted(p) { color: red; }.
Limiti di ::slotted
::slotted() può selezionare solo i figli diretti dell'host, cioè gli elementi effettivamente distribuiti nello slot. Non può selezionare i loro discendenti. Per applicare stili a livelli più profondi, esponga proprietà personalizzate CSS oppure utilizzi ::part sugli elementi interni allo shadow tree.
Rilevare le modifiche agli slot
Ogni slot genera un evento slotchange quando cambiano i nodi assegnati. Si metta in ascolto dell'evento per reagire agli aggiornamenti dinamici del contenuto: slot.addEventListener("slotchange", handler). È utile per i componenti il cui layout dipende dai figli presenti.
const slot = this.shadowRoot.querySelector("slot");
slot.addEventListener("slotchange", () => {
const nodes = slot.assignedNodes();
console.log("Slot now holds", nodes.length, "nodes");
});assignedNodes e assignedElements
slot.assignedNodes() restituisce tutti i nodi assegnati a uno slot, inclusi i nodi di testo. slot.assignedElements() restituisce solo i figli Element, di solito quelli che desidera ottenere quando scorre programmaticamente il contenuto inserito nello slot.
Distribuire i figli
Il browser gestisce automaticamente tutta la distribuzione in base all'attributo slot di ciascun figlio. Non è necessario alcun passaggio in JavaScript: scriva <span slot="footer">...</span> tra i figli del light DOM dell'host e lo slot corrispondente nello shadow tree lo conterrà.
Slot e stili dell'host
Gli stili propri dell'host, impostati su <my-card> nel documento, si propagano a cascata nei figli del light DOM, inclusi quelli che finiscono in uno slot. Il CSS dello shadow tree tramite ::slotted ha una specificità maggiore rispetto agli stili ereditati dall'host quando entrambi si applicano alla stessa proprietà.
Casi d'uso comuni
Card con slot per intestazione, corpo e piè di pagina; dialog con slot per titolo, contenuto e azioni; elementi di elenco con slot iniziali e finali; menu di navigazione con slot per gli elementi. Gli slot rendono i custom element componibili allo stesso modo di <details>/<summary> o <table>/<tr>.
Verifica delle conoscenze
Qual è la differenza tra lo slot predefinito e uno slot denominato?
Riepilogo
Gli slot proiettano i figli del light DOM in punti specifici dello shadow tree. Lo slot predefinito accetta qualsiasi figlio senza nome; gli slot denominati accettano i figli con attributi slot corrispondenti. Il contenuto di fallback riempie gli slot vuoti, ::slotted applica stili ai figli inseriti direttamente negli slot e gli eventi slotchange consentono di reagire agli aggiornamenti dinamici del contenuto.
Domande Frequenti
La lezione «Elementi slot per la distribuzione dei contenuti» è gratuita?
Sì — il testo completo di «Elementi slot per la distribuzione dei contenuti» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.
Cosa imparerò in «Elementi slot per la distribuzione dei contenuti»?
Proiettare il contenuto dell’host nel DOM shadow con slot denominati e predefiniti Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare HTML Academy?
Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Elementi slot per la distribuzione dei contenuti»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione HTML Academy?
Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- attachShadow e Shadow Root
- Elementi slot per la distribuzione dei contenuti
- Stili con ambito nel DOM shadow
- Part ed Exportparts per gli stili esterni