Web bileşenlerini stillendirme

Web özellikleri: Gölge parçalar :host-context() Basamaklı katmanlar Kapsayıcı sorguları (boyut)

Gölge DOM, bir stil sınırıdır: Devralınan özellikler (özel özellikler dahil) dışında sayfa kuralları içeriye ulaşmaz ve bileşen kuralları dışarı sızmaz. Aşağıdaki kanalları kullanarak bilinçli bir şekilde geçiş yapın.

:host, :host() ve :host-context()

/* The component's own host element, styled from inside its shadow tree. */
:host { display: block; }

/* Only when the host matches a selector (e.g. a reflected state attribute). */
:host([disabled]) { opacity: 0.5; pointer-events: none; }

/* Based on an ancestor in the Light DOM; useful for theming. */
:host-context([theme="dark"]) { background: #111; color: #eee; }

:host-context() kullanmaktan kaçının. Üst öğeleri test etmek için sınırın dışına ulaşır ancak Firefox ve Safari bu özelliği kullanıma sunmayı reddetti ve CSSWG bu özelliği daha fazla geliştirmemeye meyilli. Bu nedenle, bu özelliği ileriye dönük bir seçenek olarak değil, yalnızca Chromium'a özel bir çıkmaz sokak olarak değerlendirin. Bunun yerine, devralınan bir CSS özel niteliği aracılığıyla tema oluşturun (aşağıda): Tüketici, özelliği bir üst öğede ayarlar ve bileşen, özelliği sınır boyunca okur. Bu yöntem her yerde çalışır ve her iki tarafı da ayrı tutar.

Devralınan özellikler ve özel özellikler sınırı aşar

Devralınan CSS özellikleri (color, font-family, line-height ve CSS özel özellikleri) gölge sınırından geçer. Bu, özel özellikleri birincil tema API'si yapar: Bunları mantıklı yedeklerle kullanıma sunun.

:host {
  /* Consumers override --card-bg from outside; the fallback keeps it usable. */
  background: var(--card-bg, white);
  color: var(--card-fg, black);
}

:host üzerinde tanımlanan özel bir özellik, yalnızca özellikle ana makine öğesini hedefleyen kurallar tarafından geçersiz kılınabilir. Herkese açık mülkün devralınmasını ve ağacın herhangi bir yerinden geçersiz kılınabilmesini sağlamak için :host üzerinde herkese açık mülkü ayarlamayın ve her var()'deki yedek özelliğe güvenin. :host üzerinde herkese açık mülkü başlatmayın.

Yedeğin her var() için tekrarlanması yerine bir kez tanımlanmasını sağlamak için :host üzerinde herkese açık özelliği okuyan özel bir "gölge" özellik tanımlayın ve özel özelliğe dahili olarak referans verin:

:host {
  --_card-bg: var(--card-bg, white);
  --_card-fg: var(--card-fg, black);
}
.card { background: var(--_card-bg); color: var(--_card-fg); }

Tüketiciler, --card-bg öğesini dışarıdan geçersiz kılmaya devam eder. Baştaki alt çizgi, takma adın dahili olduğunu ve yedeğin tam olarak tek bir yerde bulunduğunu gösterir.

::slotted(): yansıtılan Light DOM'u stillendirme

::slotted(selector), bir yuvaya atanmış üst düzey düğümleri hedefler. Alt öğelere ulaşamaz ve tüm Light DOM kurallarına karşı kaybeder (tüketici kendi içeriğine sahiptir). Bu nedenle, kontrol için değil, küçük değişiklikler için kullanın. ::slotted(...) !important, tüketici kurallarını geçersiz kılabilir ancak bu durumda tüketicinin sahip olma hakkı bulunan stil geçersiz kılınır. Bu nedenle, 'ı estetik geçersiz kılmalar için değil, yapısal düzeltmeler için kullanın.

/* Matches a slotted <p>, but NOT a <p> nested inside a slotted <div>. */
::slotted(p) { margin: 0; }

::part() ve exportparts: Tema oluşturma için dahili öğeleri göster

Tüketicilerin dahili yapınızı öğrenmeden herhangi bir özellikle stil oluşturabilmesi için dahili bir öğeyi part="name" ile işaretleyin.

<!-- inside the shadow template -->
<button part="submit">Submit</button>

/* consumer stylesheet */
my-card::part(submit) { background: navy; color: white; }

Her <div> yerine birkaç üst düzey parçayı (düğme, giriş, etiket) gösterin. Geniş parça yüzeyleri kırılgan bir API haline gelir. İç içe yerleştirilmiş bir bileşenin parçalarını kendi bileşeniniz aracılığıyla yukarı doğru yeniden göstermek için bunları exportparts ile yönlendirin:

<inner-widget exportparts="submit: card-submit"></inner-widget>

İki kanal arasında bilinçli bir seçim yapın: Sınırlı, tasarım sistemi açısından güvenli bir değer kümesi için özel özellikler; belirli bir öğenin sınırsız stilini belirlemek için parçalar.

Stilleri sarmalanmış bir yerel öğeye yönlendirme

Özel bir öğe yerel bir denetimi sarmaladığında (gerçek bir <button> etrafında <my-button>), üç şey genellikle kullanıcıların kafasını karıştırır:

  • Form kontrolleri, tipografiyi devralmaz. color ve özel özellikler sınırı aşar ancak <button>, <input> ve <select>, UA stil sayfasından font ve benzerlerini alır. Bu özellikler devralınmaz. Bu nedenle, sarmalanmış kontrol, gölge ağacında font: inherit (ve genellikle color: inherit) ayarlanana kadar sayfa yazı tipinde değil, platform yazı tipinde oluşturulur. Bu, en sık karşılaşılan hatadır.
  • :host stilleri iç öğeye ulaşmıyor. :host üzerinde background/border/padding ayarı, içindeki denetimi değil, ana makine kutusunu biçimlendirir. Kasıtlı olarak iletin: Açık uçlu stil için denetimi ::part olarak gösterin veya özel özellikler aracılığıyla sabit bir değer kümesi aktarın. :host kuralı, sarmalanmış öğeye basamaklı olarak uygulanmaz.
  • display: contents + all: inherit bir kısayol değil, gerçek bir ödün vermedir. Şu anda, kullanıcıların bileşen bazında parçaları veya özel özellikleri öğrenmesine gerek kalmadan, sarmalanmış bir yerel öğeye rastgele stiller aktarmanın tek genel yolu, ana makineyi display: contents ile daraltmak ve iç denetimi all: inherit ile sıfırlamaktır. Ana makinenin kendi kutusunu kaldırmak genellikle bu kalıbın asıl amacıdır (eksik yerleşik devralmayı telafi eden kompozisyon). İki önemli uyarı: all: inherit, UA varsayılanlarını sildiği için belirli mülkleri kapsama alın veya varsayılanları geri almak istediğinizde revert kullanın. Ayrıca, getBoundingClientRect() ve getClientRects(), display: contents öğeleri için sıfır döndürdüğünden ana makineye göre sabitleme konumu bozulur. Bu ödünler uygun olmadığında ::part veya özel nitelikleri kullanın.

:state(): bileşenin kendi durumlarını stillendirme

Özel bir öğe, ElementInternals aracılığıyla this.#internals.states.add('busy') ve .delete('busy') üzerinden dahili boole durumlarını gösterebilir (yaşam döngüsü kullanımı için Özel Öğeler'e bakın). Bu durumlar, sınır boyunca bir stil kanalı haline gelir. ::part ve özel özellikler gibi, ancak yapı veya değerler yerine durum için geçerlidir. Bunları gölge ağacında :host(:state(name)) ile, tüketici stil sayfasında ise tag-name:state(name) ile eşleştirin:

/* Inside the component's shadow tree. */
:host(:state(busy)) button { opacity: 0.6; pointer-events: none; }

/* From the consumer's stylesheet — a read-only public hook. */
favorite-button:state(favorited) { filter: drop-shadow(0 0 4px crimson); }

Yansıtılan bir özelliğin aksine, özel durum dışarıdan salt okunurdur: Tüketiciler bu durumu biçimlendirebilir ancak ayarlayamaz veya taklit edemez. Bu nedenle, bileşen tek yazıcı olarak kalır. Durum, bileşene ait olduğunda ve yalnızca stilinin belirlenmesi gerektiğinde data-* özelliği yerine bunu tercih edin.

@layer ve bileşenlerin içindeki kapsayıcı sorguları

  • Basamaklı katmanlar (@layer), gölge kökü içinde çalışır ve bu kök kapsamındadır. Gölge ağacındaki bir katman adı, sayfadaki aynı adlı katmandan bağımsızdır. Kendi bileşen stillerinizi (ör. @layer base, theme;) sıralamak için bunları kullanın. Böylece özel özellikler ve ::part aracılığıyla tüketici geçersiz kılmaları beklendiği gibi kazanmaya devam eder.
  • Kapsayıcı sorguları, duyarlı bileşenler için doğru araçtır: Bileşen, görüntü alanına değil, kendisine verilen alana yanıt vermelidir. Ana makineyi veya sarmalayıcıyı kapsayıcı olarak tanımlayın (özel öğeler varsayılan olarak display: inline değerine ayarlandığından ve boyut sınırlaması inline veya contents öğeleri için geçerli olmadığından :host öğesine display: block gibi bir düzen kutusu verin) ve sorgulayın. Böylece aynı bileşen, kenar çubuğuna veya tam genişlikli bir bölgeye uyum sağlar.
:host {
  display: block; /* Required: size containment does not apply to default display: inline */
  container-type: inline-size;
}

@container (min-width: 30rem) {
  .card { grid-template-columns: 1fr 2fr; }
}

Yedek stratejiler

::part, basamaklı katmanlar ve kapsayıcı sorguları yaygın olarak kullanılabilir. Tema, öncelikle devralınan özel özellikler aracılığıyla uygulanır ve bu özellikler, diğerlerinin çalışmadığı yerlerde bile çalışır. Yukarıda belirtildiği gibi, :host-context()'ye güvenmeyin. Bu, yalnızca Chromium'da geçerli olan ve geleceğe yönelik olmayan bir seçenektir.