JavaScript Academy · Lektion

Templates och slots

Sätt samman komponenter med template och slot.

Lektion 4 av 413 steg

Templates och slots är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

template-elementet

Elementet <template> innehåller inaktiv HTML som tolkas men inte renderas. Innehållet hålls utanför sidan tills Ni klonar och infogar det, vilket gör elementet perfekt för återanvändbar uppmärkning.

Åtkomst till template-innehåll

Ett templates underordnade noder finns i egenskapen .content, som är ett DocumentFragment. Skript, bilder och stilar i det körs eller läses inte in förrän det har infogats.

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

Klona en template

Använd importNode eller cloneNode(true) för att kopiera template-innehållet och infoga klonen. Genom att klona kan Ni skapa många kopior på ett effektivt sätt.

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

Mallar i komponenter

Anpassade element definierar ofta en template en gång och klonar den till sin shadow root för varje instans. Det går snabbare än att tolka en HTML-sträng på nytt varje gång.

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);

Vad är en slot?

En <slot> är en platshållare i ett shadow tree där elementets eget barninnehåll, dess light DOM, projiceras. På så sätt kan användare skicka in anpassat innehåll till Er komponent.

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

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

Standardinnehåll i en slot

Innehåll som placeras mellan <slot>-taggarna fungerar som reservinnehåll. Det visas endast när användaren inte tillhandahåller något matchande innehåll.

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

Namngivna slotar

Flera slotar kan samexistera genom att använda attributet name. Underordnade noder i light DOM riktas till en slot med attributet 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>

Standard-slotten (utan namn)

En slot utan name är standard-slotten. Alla underordnade noder utan attributet slot projiceras dit. Ni kan kombinera en standard-slot med flera namngivna slotar.

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

Stilisera projicerat innehåll

Använd pseudo-elementet ::slotted() för att utforma projicerade underordnade noder från shadow-stilarna. Det matchar endast projicerade noder på översta nivån.

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

slotchange-händelsen

En slot utlöser händelsen slotchange när dess tilldelade noder ändras. Lyssna efter den för att reagera när användare lägger till eller tar bort projicerat innehåll.

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

Mallar och slotar tillsammans

Mallar definierar strukturen en gång; slotar gör strukturen flexibel genom att låta konsumenter lägga in sitt eget innehåll. Tillsammans utgör de grunden för rena, återanvändbara och anpassningsbara Web Components.

Snabbtest

Testa Er förståelse av mallar och slotar.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Ni har lärt Er om mallar och slotar:

<template> innehåller inaktiv, återanvändbar uppmärkning i .content.
Klona med cloneNode(true) innan innehållet infogas.
<slot> projicerar light DOM in i shadow tree.
Namngivna slotar använder name tillsammans med det underordnade elementets attribut slot.
::slotted() utformar projicerade noder; slotchange reagerar på uppdateringar.

Ni har slutfört Web Components. Nästa steg är Intersection Observer API.

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 59
Lektioner: 200

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Templates och slots” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Templates och slots”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Templates och slots”?

Sätt samman komponenter med template och slot. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?

Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Templates och slots”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?

Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till JavaScript Academy