Template e slot
Componi componenti con template e slot.
Template e slot è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 4 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 JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.
L'elemento template
L'elemento <template> contiene HTML inattivo che viene analizzato ma non visualizzato. Il suo contenuto rimane fuori dalla pagina finché non viene clonato e inserito, rendendolo ideale per il markup riutilizzabile.
Accedere al contenuto di un template
I figli di un template risiedono nella sua proprietà .content, un DocumentFragment. Gli script, le immagini e gli stili al suo interno non vengono eseguiti né caricati finché il contenuto non viene inserito.
// <template id="card"><p>Hi</p></template>
const tpl = document.getElementById('card');
const fragment = tpl.content; // DocumentFragmentClonare un template
Utilizzi importNode o cloneNode(true) per copiare il contenuto del template, quindi inserisca il clone. La clonazione consente di creare molte copie con un costo ridotto.
const tpl = document.getElementById('card');
const clone = tpl.content.cloneNode(true);
document.body.appendChild(clone);Template all'interno dei componenti
Gli elementi personalizzati definiscono spesso un template una sola volta e lo clonano nella propria shadow root per ogni istanza. È più veloce che analizzare nuovamente una stringa HTML ogni volta.
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);Che cos'è uno slot
Un <slot> è un segnaposto all'interno di un albero shadow in cui viene proiettato il contenuto figlio dell'elemento, il suo light DOM. Questo consente agli utenti di passare contenuti personalizzati al componente.
// Shadow root markup:
// <div class="box"><slot></slot></div>
// Usage:
// <my-card>This text fills the slot</my-card>Contenuto predefinito dello slot
Il contenuto inserito tra i tag <slot> funge da fallback. Viene mostrato solo quando l'utente non fornisce contenuti corrispondenti.
// <slot>No content provided</slot>
// If the user supplies children, they replace the fallback.Slot denominati
È possibile utilizzare più slot insieme tramite l'attributo name. I figli del light DOM vengono indirizzati a uno slot tramite l'attributo 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>Lo slot predefinito (senza nome)
Uno slot senza name è lo slot predefinito. Qualsiasi figlio privo dell'attributo slot viene proiettato al suo interno. È possibile combinare uno slot predefinito con diversi slot denominati.
// <slot name="header"></slot>
// <slot></slot> <!-- default: catches everything else -->Applicare stili al contenuto proiettato
Utilizzi lo pseudo-elemento ::slotted() per applicare stili ai figli proiettati dagli stili shadow. Seleziona solo i nodi proiettati di primo livello.
// Inside shadow <style>:
// ::slotted(p) { margin: 0; color: gray; }
// ::slotted(h2) { font-size: 1.5rem; }L'evento slotchange
Uno slot genera un evento slotchange quando cambiano i nodi assegnati. Si metta in ascolto per reagire quando gli utenti aggiungono o rimuovono contenuti proiettati.
const slot = this.shadowRoot.querySelector('slot');
slot.addEventListener('slotchange', () => {
const nodes = slot.assignedNodes();
console.log('slot now has', nodes.length, 'nodes');
});Template e slot insieme
I template definiscono la struttura una sola volta; gli slot rendono flessibile quella struttura consentendo ai consumatori di inserire i propri contenuti. Insieme, offrono la base per Web Components puliti, riutilizzabili e personalizzabili.
Verifica rapida
Verifichi la Sua comprensione di template e slot.
Riepilogo
Ha imparato a utilizzare template e slot:
<template>contiene markup inattivo e riutilizzabile in.content.- Cloni il contenuto con
cloneNode(true)prima di inserirlo. <slot>proietta il light DOM nell'albero shadow.- Gli slot denominati utilizzano
nameinsieme all'attributoslotdel figlio. ::slotted()applica stili ai nodi proiettati;slotchangereagisce agli aggiornamenti.
Ha completato la sezione Web Components. Ora passeremo all'API Intersection Observer.
Domande Frequenti
La lezione «Template e slot» è gratuita?
Sì — il testo completo di «Template e slot» è 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 JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.
Cosa imparerò in «Template e slot»?
Componi componenti con template e slot. Eserciti JavaScript 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 JavaScript Academy?
Non è richiesta alcuna esperienza precedente. JavaScript 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 4 di 4.
Quanto tempo richiede la lezione «Template e slot»?
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 JavaScript Academy?
Sì. Ogni lezione JavaScript 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.