Tagul <slot> este un element structural esențial al tehnologiei Web Components și al arborilor Shadow DOM. El funcționează ca un marcator de poziție (placeholder) în interiorul unui șablon <template>, permițând dezvoltatorilor să injecteze conținut personalizat din exterior în interiorul unei componente izolate.
Definirea unei componente Web native cu sloturi numite
<!-- 1. Șablonul componentei <card-profil> -->
<template id="sablon-card">
<style>
.card { padding: 20px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.titlu { color: #1e293b; font-size: 1.25rem; }
</style>
<div class="card">
<!-- Slot numit pentru titlu -->
<div class="titlu"><slot name="nume">Nume Anonim</slot></div>
<!-- Slot implicit pentru descriere -->
<div class="corp"><slot>Descriere indisponibilă.</slot></div>
</div>
</template>
<!-- 2. Utilizarea componentei în pagină -->
<card-profil>
<span slot="nume">Elena Vasilescu</span>
<p>Inginer Software specializat în tehnologii web moderne și accesibilitate.</p>
</card-profil>Tipuri de Sloturi
- Slot Implicit (Unnamed Slot): Colectează tot conținutul care nu are specificat un atribut
slot="...". - Slot Numit (Named Slot): Selectează conținutul care are atributul corespunzător (ex:
<h3 slot="nume">). - Fallback Content: Textul sau tagurile plasate între
<slot>...</slot>sunt afișate automat dacă utilizatorul nu oferă niciun conținut pentru acel slot.