CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Şablon ve slot

HTML kursu · İleri seviye · Ders 50/56

<template> ve <slot> ile yeniden kullanılabilir parça yazarsın.

<template> ile iskelet tanımla

<template> etiketi sayfada görünmeyen bir HTML iskeleti tutar. İçine yazdığımız etiketler render edilmez; biz bunu JavaScript ile kopyalayıp sayfaya yerleştiririz.

Bu sayede aynı widget iskeletini bir kere yazıp birçok kez kullanabiliriz. Örneğin satış panelinde her bölge için ayrı widget yazmak yerine tek bir <template> tanımlarız.

Template içine normal HTML yazarız; <article>, <header> gibi etiketler yer alabilir.

<slot> ile içerik yuvası

<slot>, template içindeki bir yer tutucudur. Kopyalama sırasında dışarıdan içerik buraya enjekte edilir.

Slot'a name özniteliği veririz; örneğin <slot name="content">. Eğer dışarıdan içerik gelmezse, slot'un içine yazdığımız fallback gösterilir.

Örnek: <slot name="content"><p>Veri bekleniyor</p></slot> — içerik gelene kadar 'Veri bekleniyor' yazar.

Uygulama Body'ye template ve slot ekle

Önceki dersin widget'ını al. </section>'dan sonra, </body>'den önce bir <template> ekle.

Template'e id="widget-template" özniteliği ver. İçine bir <article> koy; onun içine <header> ve <h2> (içeriği Yeni Satış Paneli) ekle. Header'dan sonra <slot name="content"> ekle ve içine fallback olarak <p>Veri bekleniyor</p> koy.

Örnek çözümü göster 
<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Satış Paneli</title>
  </head>
  <body>
    <section>
      <header>
        <h1>Satış Paneli</h1>
      </header>
      <main>
        <article>
          <figure>
            <figcaption>Aylık ciro</figcaption>
            <p>₺124.500</p>
          </figure>
          <table>
            <thead>
              <tr>
                <th>Ürün</th>
                <th>Satış</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Pamuklu tişört</td>
                <td>320</td>
              </tr>
              <tr>
                <td>Keten pantolon</td>
                <td>184</td>
              </tr>
            </tbody>
          </table>
        </article>
      </main>
    </section>
    <template id="widget-template">
      <article>
        <header>
          <h2>Yeni Satış Paneli</h2>
        </header>
        <slot name="content">
          <p>Veri bekleniyor</p>
        </slot>
      </article>
    </template>
  </body>
</html>

Kendini test et

  1. <template> etiketinin temel özelliği nedir?

    • İçeriği anında ekrana basar
    • İçeriği sayfa yüklendiğinde gizler
    • Yalnızca CSS stilleri tanımlar
    • İçeriği bir kere yazılır, sonra kopyalanır; doğrudan render edilmez
    Cevabı göster

    İçeriği bir kere yazılır, sonra kopyalanır; doğrudan render edilmez — Doğru! template içeriği render edilmez; kopyalanıp sayfaya yerleştirilir.

  2. Slot adını tamamla

    <slot name="____">
  <p>Veri bekleniyor</p>
</slot>
    Cevabı göster 
    <slot name="content">
  <p>Veri bekleniyor</p>
</slot>

  3. Şablon kavramlarını eşleştir

    template
    Yeniden kullanılabilir iskelet
    slot
    İçerik yuvası
    fallback
    Yuva boşsa gösterilen içerik
    article
    Bağımsız içerik birimi

İleri seviye bölümündeki tüm dersler

1 İleri medya

  1. Loading lazy
  2. Decoding async
  3. Srcset ve sizes
  4. Width/height ve CLS
  5. Preload ve prefetch
  6. Özet - Performans galerisi

2 Picture ve responsive görsel

  1. Picture ve source
  2. Media özniteliği
  3. Type özniteliği
  4. Aspect-ratio
  5. Background ve img
  6. Özet - Responsive hero

3 Proje: Video oynatıcı

  1. Proje: Erişilebilir video oynatıcı
  2. Video iskeleti
  3. Track ve altyazı
  4. Poster ve önizleme
  5. Proje sonu - Video oynatıcı

4 Karmaşık formlar

  1. Form yönelimi
  2. Hidden input
  3. File upload
  4. Range ve color
  5. Output ve form event
  6. Özet - Ayarlar paneli

5 Meta veri ve SEO

  1. Meta description
  2. Open Graph
  3. Twitter card
  4. Canonical ve hreflang
  5. Title ve slug stratejisi
  6. Özet - SEO paketi

6 Proje: Schema.org işaretleme

  1. Proje: Schema.org işaretleme
  2. Itemtype ve itemid
  3. Itemprop
  4. Nested itemtype
  5. Proje sonu - Yapısal veri

7 Web bileşenleri HTML

  1. Template element
  2. Slot element
  3. Custom element isimleri
  4. Shadow DOM iskeleti
  5. Declarative shadow DOM
  6. Özet - Kart şablonu

8 Şablonlar ve partial

  1. Server-rendered vs client
  2. Partial HTML
  3. Data attributes
  4. Hydration hooks
  5. Noscript ve progressive
  6. Özet - Bileşen iskeleti

9 Proje: Dashboard widget

  1. Proje: Dashboard widget
  2. Widget iskeleti
  3. Veri görsel yapı
  4. Şablon ve slot
  5. Proje sonu - Widget

10 İleri seviye finali

  1. Meydan okuma - Responsive görsel
  2. Meydan okuma - Erişilebilir video
  3. Meydan okuma - Karmaşık form
  4. Meydan okuma - SEO ve yapısal veri
  5. Meydan okuma - İleri seviye projesi