Part dan Exportparts untuk Gaya Eksternal

Enkapsulasi gaya yang ketat dari Shadow DOM mencegah pengguna menata ulang elemen individual di dalam komponen. Variabel CSS dapat digunakan untuk properti global, tetapi Anda tidak dapat, misalnya, memberikan radius batas khusus pada tombol internal "close". Part mengatasi hal ini.

Tandai elemen internal shadow dengan part="name". Pengguna kemudian dapat menargetkannya dengan pseudo-elemen ::part(name): my-dialog::part(close-button) { color: red; }. Elemen bernama tersebut menjadi kait penataan gaya, sementara bagian shadow lainnya tetap terenkapsulasi.

Pisahkan nama dengan spasi untuk mengekspos satu elemen sebagai beberapa part: part="button primary". ::part(button) menargetkannya secara umum, sedangkan ::part(primary) menargetkannya sebagai elemen bergaya utama. Setiap nama dicocokkan secara terpisah.

::part hanya mengizinkan pseudo-kelas tertentu (:hover, :focus, :disabled)—bukan penggabung turunan atau pemilihan struktural lanjutan. ::part(card) p tidak valid; Anda tidak dapat menjangkau bagian dalam part dengan selector turunan.

Ketika sebuah elemen khusus menyarangkan elemen khusus lain di dalam shadow-nya sendiri, part elemen bagian dalam biasanya tidak ditampilkan ke halaman luar. exportparts="close-button" pada elemen bersarang meneruskan part tersebut ke host luar.

exportparts="close-button: dismiss" mengekspor part bagian dalam dengan nama baru pada elemen luar. Ini memungkinkan komponen luar menyediakan permukaan penamaan yang rapi, terlepas dari elemen internal yang digunakannya.

Properti kustom mengekspos nilai (warna, jarak, font). Part mengekspos elemen (seluruh permukaan CSS—batas, transformasi, animasi). Gunakan properti kustom untuk token global dan part untuk kustomisasi tingkat elemen yang spesifik. Keduanya dapat digunakan bersama pada komponen yang sama.

Praktik sistem desain: tampilkan sejumlah kecil part untuk elemen yang paling sering dikustomisasi (tombol, header, indikator), ditambah sekumpulan properti kustom yang lengkap untuk warna, jarak, dan tipografi. Pengguna dapat memberi tema pada tingkat nilai atau tingkat elemen, sesuai kebutuhannya.

Nama part menjadi bagian dari API publik komponen—mengubahnya akan merusak CSS pengguna. Pilih nama yang menjelaskan peran elemen ("close-button", "header", "track"), bukan posisinya ("first-button"), agar API tetap bermakna seiring berkembangnya implementasi.

Daftarkan semua part yang tersedia (beserta part yang diekspor) di berkas readme komponen. Tanpa dokumentasi, pengguna harus memeriksa DOM untuk menemukan part, sehingga mereka terikat pada apa pun yang kebetulan ditemukan. Perlakukan daftar part seperti daftar properti pada komponen kerangka kerja.

::part dan exportparts tersedia di semua peramban modern. Bahkan versi Safari yang lebih lama kini mendukung ::part. Gunakan dengan bebas; untuk peramban yang sangat lama (sebagian besar sudah tidak digunakan), gunakan properti kustom CSS tambahan sebagai alternatif.

Apa yang dilakukan atribut exportparts?

Atribut part mengekspos elemen shadow individual untuk penataan gaya eksternal melalui ::part(name)—dengan kemampuan CSS penuh tanpa merusak enkapsulasi. exportparts meneruskan part dari elemen khusus bersarang ke host luar, dan dapat mengganti namanya. Gabungkan part dengan properti kustom CSS untuk menyediakan permukaan tema yang lengkap, dan dokumentasikan daftar part sebagai bagian dari API komponen.