JavaScript Academy · Ders

Shadow DOM ve Kapsülleme

Stilleri ve işaretlemeyi shadow köklerinde yalıtın.

Shadow DOM ve Kapsülleme, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

Gölge DOM Nedir

Gölge DOM, bir öğeye özel ve kapsüllenmiş bir DOM ağacı sağlar. İçindeki işaretleme ve stiller sayfanın geri kalanından yalıtılır.

Dış CSS içeri sızmaz.
İç CSS dışarı sızmaz.
İç yapı, normal DOM sorgularından gizlenir.

attachShadow

this.attachShadow({ mode: 'open' }) çağrısını yaparak bir gölge ağacı oluşturursunuz. Bu çağrı, normal bir düğüm gibi doldurabileceğiniz bir gölge root'u döndürür.

class FancyBox extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
}
customElements.define('fancy-box', FancyBox);

Açık ve Kapalı Mod

mode seçeneği dışarıdan erişimi denetler:

'open' — root'a element.shadowRoot üzerinden erişilebilir.
'closed' — element.shadowRoot, null döndürür; başvuruyu yalnızca kodunuz tutar.

Hata ayıklamayı kolaylaştırdığı için çoğu bileşen 'open' kullanır.

const root = this.attachShadow({ mode: 'open' });
// Later, from outside:
// myEl.shadowRoot  -> the shadow root (open)
// closed mode would give null here

Gölge Root'u Doldurma

Kapsüllenmiş içeriği oluşturmak için shadowRoot.innerHTML değerini ayarlayın. Bu işaretleme document.querySelector tarafından görünmez.

class FancyBox extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: 'open' });
    root.innerHTML = '<p>I live inside the shadow DOM</p>';
  }
}
customElements.define('fancy-box', FancyBox);

Kapsamlı Stiller

Gölge root'un içindeki bir style etiketi yalnızca o root'u etkiler. Bileşenin dışındaki aynı seçici etkilenmez ve sayfa stilleri içeri sızmaz.

root.innerHTML =
  '<style>p { color: rebeccapurple; }</style>' +
  '<p>Only this paragraph is purple.</p>';
// A <p> elsewhere on the page is NOT affected.

:host Seçicisi

Gölge stillerinin içinde :host, özel öğenin kendisini (gölge ağacının ana öğesini) hedefler. Bileşenin dış kutusunu biçimlendirmek için kullanın.

root.innerHTML =
  '<style>' +
  ':host { display: block; border: 1px solid gray; }' +
  ':host(.active) { border-color: green; }' +
  '</style>' +
  '<slot></slot>';

Yalıtılmış Stil Uygulaması

Kapsülleme, bileşen ve sayfa yazarlarının sınıf adları üzerinde çatışmasını önler. Bir bileşenin içindeki .title kuralı başka bir yerdeki .title öğesini hiçbir zaman etkilemez.

Genel CSS çakışmaları olmaz.
Basit ve genel seçiciler yeniden güvenli hâle gelir.

Gölge Root İçinde Sorgulama

İç düğümlere erişmek için belgeyi değil, gölge root'u sorgulayın. Gölge root'u aynı sorgu yöntemlerini destekler.

class ToggleButton extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: 'open' });
    root.innerHTML = '<button>Off</button>';
    this.btn = root.querySelector('button');
  }
}
customElements.define('toggle-button', ToggleButton);

Olaylar Sınırı Aşar

click gibi birçok olay Gölge DOM'dan dışarı doğru yayılır, ancak yeniden hedeflenir; böylece dışarıdaki dinleyiciler iç düğüm yerine ana öğeyi görür. Bu, kapsüllemeyi korur.

// Outside listener sees event.target as <toggle-button>,
// not the inner <button>.
document.querySelector('toggle-button')
  .addEventListener('click', e => {
    console.log(e.target.tagName); // TOGGLE-BUTTON
  });

Kalıtsal Stiller

color ve font-family gibi birkaç CSS özelliği gölge sınırından miras alınır; çünkü miras, birleştirilmiş ağaç boyunca aşağı doğru akar. Miras almaya güvenerek veya CSS özel özelliklerini kullanarak sayfanın görünümünü kullanabilirsiniz.

// :host { color: inherit; }
// CSS custom properties also pierce the boundary:
// :host { color: var(--text-color, black); }

Gölge DOM Ne Zaman Kullanılmalı

Yeniden kullanılabilir bir bileşen için güçlü stil ve işaretleme yalıtımı gerektiğinde Gölge DOM'a başvurun. Bileşenin sayfanın genel stillerini serbestçe devralmasını ve bunlara katılmasını istediğinizde kullanmayın.

Hızlı Kontrol

Gölge DOM konusundaki anlayışınızı sınayın.

Özet

Gölge DOM hakkında bilgi edindiniz:

attachShadow({ mode }) yalıtılmış bir ağaç oluşturur.
'open', shadowRoot değerini dışarı açar; 'closed' ise gizler.
İç style etiketleri kapsamlıdır; :host öğenin kendisini biçimlendirir.
Sorgular belgeye değil, gölge root'a uygulanır.
Olaylar, kapsüllemeyi korumak için yeniden hedeflenir.

Sırada, şablonlar ve yuvalarla işaretlemeyi yeniden kullanacağız.

Sıkça Sorulan Sorular

“Shadow DOM ve Kapsülleme” dersi ücretsiz mi?

Evet — “Shadow DOM ve Kapsülleme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“Shadow DOM ve Kapsülleme” dersinde ne öğreneceğim?

Stilleri ve işaretlemeyi shadow köklerinde yalıtın. JavaScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te JavaScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Shadow DOM ve Kapsülleme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← JavaScript Academy Sayfasına Dön