HTML Academy · Pelajaran

Gaya Berskop dalam DOM Bayangan

Tulis CSS yang hanya mempengaruhi elemen dalam pepohon bayangan

Pelajaran 3 daripada 413 langkah

Gaya Berskop dalam DOM Bayangan ialah pelajaran HTML Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran HTML Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.

Pengkapsulan CSS secara Lalai

Setiap peraturan <style> di dalam akar bayang hanya terpakai di dalam akar itu. p { color: red } dalam pepohon bayang hanya mewarnakan perenggan di dalam bayang tersebut — perenggan dalam dokumen utama tidak terjejas dan gaya dokumen utama tidak menembusi bayang.

Kepentingan Pengkapsulan

Pengkapsulan menghapuskan masalah CSS global yang menghantui aplikasi besar selama berdekad-dekad. Gaya komponen tidak boleh ditindih secara tidak sengaja oleh CSS tapak, dan komponen itu juga tidak boleh merosakkan tapak secara tidak sengaja. Sempadan ini ditetapkan oleh spesifikasi, bukan konvensyen.

Kelas Pseudo :host

Dari dalam bayang, gayakan elemen hos dengan :host. Gunakan :host(selector) untuk mengehadkan berdasarkan pemilih: :host([open]) { display: block; } hanya sepadan dengan hos apabila atribut open wujud.

Sifat Diwarisi Masih Merentasi Sempadan

Sifat CSS yang diwarisi seperti color, font-family dan line-height masih merentasi sempadan bayang melalui pewarisan. Tetapan dokumen body { color: blue } turut menjadikan teks bayang berwarna biru melainkan bayang itu menindihnya secara jelas. Ini ialah ciri yang memastikan lalai tipografi kekal konsisten.

Sifat Tersuai CSS Menembusi Sempadan

Sifat tersuai, iaitu pemboleh ubah CSS, diwarisi melalui akar bayang. Oleh itu, sifat ini menjadi cara standard untuk mendedahkan API tema komponen: isytiharkan --card-bg: var(--surface, white) di dalam bayang dan biarkan pengguna menindih --surface pada hos.

/* Shadow */
:host {
  background: var(--card-bg, white);
}
/* Page */
my-card {
  --card-bg: #f3f4f6;
}

::part untuk Penggayaan Luaran

Tandakan elemen dalaman bayang dengan part="name" supaya pengguna boleh menggayakannya dengan my-card::part(name) { ... }. Gunakan part sebagai titik sambungan penggayaan individu sambil mengekalkan sebahagian besar pepohon bayang dalam keadaan terkapsul.

Helaian Gaya Diterima Pakai

shadowRoot.adoptedStyleSheets = [sheet] berkongsi satu CSSStyleSheet merentasi banyak akar bayang, sekali gus mengelakkan penghuraian <style> berulang. Bina helaian dengan new CSSStyleSheet() dan sheet.replaceSync(cssText). Ini memberikan peningkatan prestasi yang besar dalam sistem reka bentuk.

Susunan Pengisytiharan

Letakkan tag <style> di bahagian paling atas innerHTML bayang supaya gaya dihuraikan sebelum seluruh DOM dibina. Ini mengelakkan kilatan singkat kandungan tanpa gaya yang berlaku jika gaya tiba lewat dalam susunan penghuraian.

:host-context untuk Peraturan Berasaskan Leluhur

:host-context(.dark-mode) :host menggayakan hos berdasarkan pemilih leluhur di luar bayang. Ini berguna untuk menetapkan tema komponen berdasarkan kelas pada pembalut peringkat tinggi. Sokongan pelayar adalah baik, tetapi sahkannya dalam matriks sasaran anda.

Set Semula Global Kekal di Luar

Set semula CSS seluruh dokumen seperti jidar pada body dan box-sizing tidak menjejaskan pepohon bayang. Gunakan semula set semula yang diperlukan di dalam setiap akar bayang, atau kongsikannya melalui helaian gaya binaan yang diterima pakai ke dalam setiap komponen.

Menyahpepijat Gaya Bayang

Chrome DevTools memaparkan akar bayang dalam panel Elemen di bawah "#shadow-root (open)". Anda boleh memeriksa, mengedit dan menogol gaya bayang seperti CSS lain, termasuk kelas pseudo :host dan peraturan ::part.

Semakan Pengetahuan

Mengapakah sifat tersuai CSS, iaitu pemboleh ubah, menjadi cara pilihan untuk menetapkan tema komponen DOM bayang?

Jawab dalam pelajaran interaktif

Ringkasan

DOM bayang mengkapsulkan gaya dalam kedua-dua arah. Gayakan hos dengan :host, dedahkan titik sambungan tema melalui sifat tersuai CSS yang diwarisi, dedahkan elemen individu untuk penggayaan dengan ::part, kongsikan helaian gaya menggunakan adoptedStyleSheets, dan gunakan semula set semula di dalam setiap akar bayang kerana CSS seluruh dokumen tidak merentasi sempadan.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 40
Pelajaran: 159

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Gaya Berskop dalam DOM Bayangan” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran HTML Academy, termasuk “Gaya Berskop dalam DOM Bayangan”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Gaya Berskop dalam DOM Bayangan”?

Tulis CSS yang hanya mempengaruhi elemen dalam pepohon bayangan Anda berlatih HTML Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan HTML Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran HTML Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “Gaya Berskop dalam DOM Bayangan” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke HTML Academy