Harici Stilleme için Part ve Exportparts

Gölge DOM'un katı stil kapsüllemesi, tüketicilerin bir bileşenin içindeki tek tek öğeleri yeniden biçimlendirmesini engeller. CSS değişkenleri genel özellikler için işe yarar, ancak örneğin içteki "close" düğmesine özel bir kenar yarıçapı veremezsiniz. Bunu part'lar çözer.

Gölge içindeki bir öğeyi part="name" ile işaretleyin. Tüketiciler daha sonra öğeyi ::part(name) sözde öğesiyle hedefleyebilir: my-dialog::part(close-button) { color: red; }. Adlandırılmış öğe bir biçimlendirme kancası hâline gelirken gölgenin geri kalanı kapsüllenmiş olarak kalır.

Bir öğeyi birden çok part olarak dışa açmak için adları boşlukla ayırın: part="button primary". ::part(button) öğeyi genel olarak hedefler, ::part(primary) ise onu birincil stilli öğe olarak hedefler. Her ad bağımsız olarak eşleştirilir.

::part yalnızca belirli sözde sınıflara (:hover, :focus, :disabled) izin verir; alt öğe birleştiricilerine veya daha ileri yapısal seçime izin vermez. ::part(card) p geçersizdir; alt öğe seçicileriyle bir part'ın içine ulaşamazsınız.

Bir özel öğe kendi gölgesinin içine başka bir özel öğe yerleştirdiğinde, iç öğenin part'ları normalde dış sayfaya açılmaz. İç içe öğedeki exportparts="close-button", bu part'ları dış barındırıcıya iletir.

exportparts="close-button: dismiss", iç part'ı dış öğede yeni bir adla dışa aktarır. Bu, dış bileşenin birleştirdiği iç öğelerden bağımsız, temiz bir adlandırma yüzeyi sunmasını sağlar.

Özel özellikler değerleri (renk, aralık, yazı tipleri) açığa çıkarır. part'lar öğeleri açığa çıkarır (CSS'nin tamamı — kenarlıklar, dönüşümler, animasyonlar). Genel belirteçler için özel özellikleri, tek seferlik öğe düzeyinde özelleştirme için part'ları kullanın. Her ikisi de aynı bileşende birlikte bulunabilir.

Tasarım sistemi uygulaması şöyledir: en çok özelleştirilen öğeler (düğmeler, başlıklar, göstergeler) için küçük bir part yüzeyi ve renk, aralık ve tipografi için geniş bir özel özellik kümesi açığa çıkarın. Tüketiciler ihtiyaçlarına göre tema uygulamasını değer düzeyinde veya öğe düzeyinde gerçekleştirebilir.

part adları bileşenin genel programlama arayüzünün bir parçası hâline gelir; bunları değiştirmek, tüketicilerin CSS'sini bozar. Uygulama geliştikçe arayüzün anlamlı kalması için "close-button", "header" ve "track" gibi öğenin rolünü açıklayan adlar seçin; "first-button" gibi konum belirten adlardan kaçının.

Kullanılabilir tüm part'ları ve dışa aktarılan part'ları bileşenin benioku belgesinde listeleyin. Belgelendirme olmadan tüketicilerin part'ları keşfetmek için DOM'u incelemesi gerekir; bu da onları buldukları mevcut yapıya bağımlı hâle getirir. part listesini bir çerçeve bileşeninin özellikler listesi gibi ele alın.

::part ve exportparts tüm modern tarayıcılarda kullanılabilir. Daha eski Safari sürümleri bile artık ::part özelliğini destekler. Özgürce kullanabilirsiniz; çok eski tarayıcılar (çoğu artık kullanılmıyor) için geçici çözüm olarak ek CSS özel özelliklerine başvurun.

exportparts özniteliği ne yapar?

part özniteliği, tek tek gölge öğelerini ::part(name) aracılığıyla dış biçimlendirmeye açar; kapsüllemeyi bozmadan CSS'nin tüm gücünü sunar. exportparts, iç içe özel öğelerdeki part'ları dış barındırıcıya iletir ve isteğe bağlı olarak yeniden adlandırır. Eksiksiz bir tema yüzeyi için part'ları CSS özel özellikleriyle birleştirin ve part listesini bileşenin programlama arayüzünün bir parçası olarak belgeleyin.