Gölge DOM İçinde Kapsamlı Stiller

Bir gölge kökü içindeki her <style> kuralı yalnızca o kökün içinde uygulanır. Gölge ağacındaki p { color: red } yalnızca o gölgenin içindeki paragrafları kırmızı yapar; ana belgedeki paragraflar etkilenmez ve ana belgedeki stiller gölgenin içine ulaşamaz.

Kapsülleme, büyük uygulamaların onlarca yıldır yaşadığı genel CSS sorununu ortadan kaldırır. Bir bileşenin stilleri site CSS'si tarafından kazara geçersiz kılınamaz ve bileşen de siteyi kazara bozamaz. Bu sınır bir uzlaşı değil, belirtimdir.

Gölgenin içinden barındırıcı öğeyi :host ile biçimlendirin. Seçiciye göre kapsamlandırmak için :host(selector) kullanın: :host([open]) { display: block; }, yalnızca open özniteliği mevcut olduğunda barındırıcıyla eşleşir.

Devralınan CSS özellikleri (color, font-family, line-height) devralma yoluyla gölge sınırını yine aşar. Belgenin body { color: blue } ayarı, gölge bunu açıkça geçersiz kılmadığı sürece gölge metnini de mavi yapar. Bu bir özelliktir: tipografi varsayılanları tutarlı kalır.

Özel özellikler (CSS değişkenleri) gölge köklerinden devralınır; bu da onları bir bileşenin tema oluşturma arayüzünü dışa açmanın standart yolu hâline getirir: gölgenin içinde --card-bg: var(--surface, white) tanımlayın ve tüketicilerin barındırıcıdaki --surface değerini geçersiz kılmasına izin verin.

Gölge içindeki bir öğeyi part="name" ile işaretleyin; böylece tüketiciler onu my-card::part(name) { ... } ile biçimlendirebilir. Gölge ağacının büyük bölümünü kapsüllenmiş tutarken tek tek öğeler için biçimlendirme kancaları sağlamak üzere part'ları kullanın.

shadowRoot.adoptedStyleSheets = [sheet], tek bir CSSStyleSheet'i birçok gölge kökü arasında paylaşarak tekrarlanan <style> ayrıştırmasını önler. Sayfaları new CSSStyleSheet() ile oluşturun ve sheet.replaceSync(cssText) kullanın. Tasarım sistemlerinde büyük bir performans kazanımı sağlar.

<style> etiketlerini gölgenin innerHTML'inin en üstüne yerleştirin; böylece stiller DOM'un geri kalanı oluşturulmadan önce ayrıştırılır. Bu, stiller ayrıştırma sırasının geç bir aşamasında geldiğinde oluşan kısa süreli biçimlendirilmemiş içerik parlamasını önler.

:host-context(.dark-mode) :host, barındırıcıyı gölgenin dışındaki bir üst öğe seçicisine göre biçimlendirir. Üst düzey bir sarmalayıcıdaki sınıfa göre bileşenlere tema uygulamak için kullanışlıdır. Tarayıcı desteği iyidir, ancak hedef tarayıcı matrisinizde doğrulayın.

Belge genelindeki CSS sıfırlamaları (body kenar boşlukları, box-sizing) gölge ağaçlarını etkilemez. Gerekli sıfırlamaları her gölge kökünde yeniden uygulayın veya her bileşene benimsenen oluşturulmuş bir stil sayfası aracılığıyla paylaşın.

Chrome DevTools, Öğeler panelinde gölge köklerini "#shadow-root (open)" altında gösterir. :host sözde sınıfı ve ::part kuralları dâhil olmak üzere gölge stillerini diğer CSS'ler gibi inceleyebilir, düzenleyebilir ve açıp kapatabilirsiniz.

Gölge DOM, stilleri iki yönde de kapsüller. Barındırıcıyı :host ile biçimlendirin, devralınan CSS özel özellikleri aracılığıyla tema kancaları sağlayın, tek tek öğeleri ::part ile biçimlendirmeye açın ve stil sayfalarını adoptedStyleSheets ile paylaşın. Belge genelindeki CSS sınırı aşmadığı için sıfırlamaları her gölge kökünde yeniden uygulayın.