Declarative shadow DOM

HTML kursu · İleri seviye · Ders 39/56

<template shadowrootmode> ile bildirimsel shadow DOM yazarsın.

Declarative shadow DOM nedir?

Klasik shadow DOM için JavaScript gerekir: attachShadow çağrısı yapılır, şablon elle bağlanır. Declarative shadow DOM ise aynı işi yalnızca HTML ile yapar; JavaScript beklenmez.

Bunun için <template shadowrootmode="open"> yazarsın. Tarayıcı bu şablonu görür görmez shadow kökü otomatik bağlar. Sayfa ilk boyandığında bileşen hazırdır; titreme olmaz.

template shadowrootmode yazımı

Declarative shadow DOM için şöyle yazarsın: <template shadowrootmode="open">. Bu şablonun içine normal shadow iskeleti girer: <style>, <div>, <slot>.

Tarayıcı şablonu gördüğü an shadow kökü bağlar ve şablonu kök içine taşır. Böylece JavaScript yüklenmeden bileşen doğru görünür. Bu yöntem, sunucu tarafında HTML üreten projelerde özellikle değerlidir.

Sunucu tarafında üretim

Declarative shadow DOM'un en büyük kazancı sunucu tarafında üretilen HTML'dedir. Sunucu, bileşenin shadow yapısını doğrudan HTML olarak gönderir; tarayıcı JavaScript'i beklemeden doğru sonucu boyar.

Bu, ilk yükleme hızını artırır ve titremeyi azaltır. JavaScript devre dışı bile olsa bileşen doğru görünür. Modern framework'ler bu yöntemi sunucu taraflı üretimde tercih eder.

Uygulama declarative shadow DOM iskeleti yaz

Body içine bir <template shadowrootmode="open"> ekle. İçinde bir <style> (içeriği: p { color: blue; }) ve bir <slot> olsun.

Örnek çözümü göster

<body>
  <template shadowrootmode="open">
    <style>p { color: blue; }</style>
    <slot></slot>
  </template>
</body>

Kendini test et

shadowrootmode özniteliği hangi değeri alır?
- open veya closed
- visible
- hidden
- true veya false
Cevabı göster

open veya closed — Doğru. shadowrootmode 'open' ya da 'closed' değerini alır.

shadowrootmode özniteliğini yaz

<template ____>
  <slot></slot>
</template>

Cevabı göster

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

declarative shadow DOM terimlerini eşleştir

shadowrootmode

shadow kök modu
open

dış erişime izin verir
closed

dış erişimi engeller
declarative

JavaScript'siz

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

Declarative shadow DOM