Declarative shadow DOM

HTML kursu · Uzman · Ders 31/39

<template shadowrootmode> ile SSR-uyumlu shadow DOM yazarsın.

Declarative shadow DOM nedir?

Imperatif shadow DOM, JS ile element.attachShadow() çağrısı yapar; bu yüzden sunucu tarafı oluşturmada (SSR) HTML'de shadow DOM bulunamaz, JS yüklenene kadar içerik kaybolur.

Deklaratif shadow DOM bunu HTML'e taşır: <template shadowrootmode="open"> içine yazılan her şey, ayrıştırma sırasında otomatik olarak shadow kök olur. JS gerekmez; SSR uyumludur ve sayfa ilk boyamada (first paint) shadow DOM ile gelir.

shadowrootmode yazımı

Yazım şekli şöyle: custom elementin içine bir <template> koy ve shadowrootmode özelliğine "open" veya "closed" ver. Tarayıcı bu şablonu ayrıştırırken shadow kök olarak işler ve şablonu DOM'dan kaldırır; geride shadow kök kalır.

open, dışarının element.shadowRoot ile köke erişmesine izin verir; closed erişimi kapatır. Çoğu bileşen open kullanır; test ve erişilebilirlik için kolaylık sağlar.

Uygulama Deklaratif shadow DOM ile profile-card yaz

Bir <profile-card> elementi yaz. İçinde:

Bir <template shadowrootmode="open"> aç ve kapat
Template içinde bir <h2> (içeriği dolu başlık)
Template içinde <slot name="name">
Template dışında, profile-card içinde, <h2 slot="name"> (içeriği dolu isim)
Sonunda </profile-card> kapanış etiketi

Örnek çözümü göster

<profile-card>
  <template shadowrootmode="open">
    <h2>Profil kartı</h2>
    <slot name="avatar"></slot>
    <slot name="name"></slot>
    <slot name="bio"></slot>
  </template>
  <img slot="avatar" src="/kullanici/ayse/avatar.png" alt="Ayşe Yılmaz avatarı">
  <h2 slot="name">Ayşe Yılmaz</h2>
  <p slot="bio">Ürün tasarımcısı, İstanbul'da yaşıyor.</p>
</profile-card>

Kendini test et

Deklaratif shadow DOM'un imperatif attachShadow'a göre temel avantajı nedir?
```
<template shadowrootmode="open">...</template>
```
- Daha az kod yazılır
- SSR sırasında HTML içinde çalışır
- Daha hızlı çalışır
- CSS encapsulation gerektirmez
Cevabı göster

SSR sırasında HTML içinde çalışır — Doğru. Deklaratif shadow DOM HTML'de tanımlandığı için SSR uyumludur; JS beklenmez.

Deklaratif shadow DOM şablonunu tamamla

<template ____="open"><slot name="avatar"></slot></template>

Cevabı göster

<template shadowrootmode="open"><slot name="avatar"></slot></template>

Yaklaşımı özelliğine eşleştir

shadowrootmode

HTML içinde
attachShadow

JS içinde
SSR uyumlu

Deklaratif
JS bekler

İmperatif

Uzman bölümündeki tüm dersler

Declarative shadow DOM