Shadow DOM iskeleti
Shadow DOM'un HTML tarafını (slot, template) öğrenirsin.
Shadow DOM nedir?
Shadow DOM, bir bileşenin iç yapısını dış sayfadan yalıtır. İçindeki CSS ve HTML, dışarıdaki stillerden etkilenmez; dışarıdaki stiller de içeri sızmaz. Böylece bileşen, kendi kendine yeten bir kutu olur.
HTML tarafında shadow DOM, genellikle bir <template> ile hazırlanır. JavaScript bu şablonu alır, bileşene bir shadow kök bağlar ve içeriği oraya koyar. Slot ve template, shadow DOM'un iskeletidir.
template ile shadow iskeleti
Shadow DOM'un içeriği genellikle bir <template> içine yazılır. Şablonun içinde <style>, <div> ve <slot> bulunur. JavaScript bu şablonu alır, bileşene bir shadow kök bağlar ve içeriği köke kopyalar.
Bu yöntem hem yazımı hem de performansı kolaylaştırır. Şablonu bir kez yazarsın; her bileşen örneği aynı yapıyı kullanır. Slot sayesinde dışarıdan gelen içerik doğru yere oturur.
open ve closed mod
Shadow kök iki modda bağlanır: open ve closed. Open modda dışarıdaki JavaScript, bileşenin iç yapısına erişebilir. Closed modda ise erişim engellenir; bileşen tamamen kapsüllenir.
Çoğu bileşen open kullanır; bu, hata ayıklamayı ve testi kolaylaştırır. Closed mod ise iç yapının gizli kalmasını isteyen, örneğin ödeme formları gibi hassas bileşenler için tercih edilir.
Uygulama shadow iskeletini template içine yaz
Body içine bir <template> ekle. İçinde bir <style> (içeriği: p { color: gray; }), bir <p> (metin: Açıklama) ve bir <slot> olsun.
Örnek çözümü göster
<body>
<template>
<style>p { color: gray; }</style>
<p>Açıklama</p>
<slot></slot>
</template>
</body>Kendini test et
-
Shadow DOM'un temel faydası nedir?
- Sayfa yüklenme süresini kısaltır.
- JavaScript bağımlılığını azaltır.
- Eski tarayıcılarda da çalışır.
- Bileşenin iç yapısını dış sayfadan yalıtır.
Cevabı göster
Bileşenin iç yapısını dış sayfadan yalıtır. — Doğru. shadow DOM, bileşenin iç yapısını dış sayfadan yalıtır.
-
shadow DOM tanımını tamamla
Bileşenin iç yapısını dış sayfadan yalıtan mekanizma: ____ DOMCevabı göster
Bileşenin iç yapısını dış sayfadan yalıtan mekanizma: shadow DOM -
shadow DOM terimlerini eşleştir
- shadow DOM
- iç yapı yalıtımı
- shadow kök
- içeriğin bağlandığı düğüm
- template
- iskelet şablonu
- slot
- içeriğin gireceği yer