Gaya dengan Cakupan di Dalam Shadow DOM

Setiap aturan <style> di dalam shadow root hanya berlaku di dalam root tersebut. p { color: red } di pohon shadow hanya memberi warna pada paragraf di dalam shadow itu—paragraf di dokumen utama tidak terpengaruh, dan gaya dari dokumen utama tidak dapat masuk ke dalam shadow.

Enkapsulasi menghilangkan masalah CSS global yang telah menghantui aplikasi besar selama puluhan tahun. Gaya komponen tidak dapat secara tidak sengaja ditimpa oleh CSS situs, dan komponen juga tidak dapat merusak situs secara tidak sengaja. Batas ini ditetapkan oleh spesifikasi, bukan konvensi.

Dari dalam shadow, tata elemen host dengan :host. Gunakan :host(selector) untuk membatasi berdasarkan selector: :host([open]) { display: block; } hanya cocok dengan host ketika atribut open ada.

Properti CSS yang diwariskan (color, font-family, line-height) tetap menyeberangi batas shadow melalui pewarisan. Pengaturan dokumen body { color: blue } juga membuat teks shadow berwarna biru, kecuali shadow menimpanya secara eksplisit. Ini merupakan fitur: bawaan tipografi tetap konsisten.

Properti kustom (variabel CSS) diwariskan melalui shadow root, sehingga menjadi cara standar untuk menyediakan API tema komponen: deklarasikan --card-bg: var(--surface, white) di dalam shadow dan biarkan pengguna mengganti --surface pada host.

Tandai elemen internal shadow dengan part="name", lalu pengguna dapat menatanya dengan my-card::part(name) { ... }. Gunakan part sebagai kait penataan gaya individual sambil tetap menjaga sebagian besar pohon shadow tetap terenkapsulasi.

shadowRoot.adoptedStyleSheets = [sheet] membagikan satu CSSStyleSheet ke banyak shadow root sehingga parsing <style> berulang dapat dihindari. Buat lembar dengan new CSSStyleSheet() dan sheet.replaceSync(cssText). Ini memberikan peningkatan kinerja besar dalam sistem desain.

Tempatkan tag <style> di bagian paling atas innerHTML shadow agar gaya diurai sebelum bagian DOM lainnya dibuat. Ini menghindari kilatan singkat konten tanpa gaya yang terjadi jika gaya muncul terlambat dalam urutan parsing.

:host-context(.dark-mode) :host menata host berdasarkan selector leluhur di luar shadow. Ini berguna untuk memberi tema pada komponen berdasarkan kelas pada pembungkus tingkat tinggi. Dukungan peramban sudah baik, tetapi verifikasilah dalam matriks target Anda.

Reset CSS di seluruh dokumen (margin pada body, box-sizing) tidak memengaruhi pohon shadow. Terapkan kembali reset yang diperlukan di dalam setiap shadow root, atau bagikan melalui lembar gaya yang dibuat secara terprogram dan diadopsi ke setiap komponen.

Chrome DevTools menampilkan shadow root di panel Elements dengan label "#shadow-root (open)". Anda dapat memeriksa, mengedit, dan mengaktifkan atau menonaktifkan gaya shadow seperti CSS lainnya, termasuk pseudo-kelas :host dan aturan ::part.

Shadow DOM mengenkapsulasi gaya ke kedua arah. Tata host dengan :host, sediakan kait tema melalui properti kustom CSS yang diwariskan, tampilkan elemen individual untuk ditata dengan ::part, bagikan lembar gaya dengan adoptedStyleSheets, dan terapkan kembali reset di setiap shadow root karena CSS di seluruh dokumen tidak melewati batas.