HTML Academy · Pelajaran

attachShadow dan Punca Bayangan

Cipta pepohon bayangan terenkapsulasi pada elemen hos

Pelajaran 1 daripada 413 langkah

attachShadow dan Punca Bayangan ialah pelajaran HTML Academy percuma di CoddyKit. Ini ialah pelajaran 1 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.

Apakah DOM Bayangan?

DOM Bayangan memberikan elemen pepohon DOM terpencil sendiri, iaitu "pepohon bayangan", yang tidak muncul dalam DOM utama halaman. CSS luar tidak meresap ke dalam dan CSS dalam tidak meresap keluar — sesuai untuk pengkapsulan komponen.

Melampirkan Punca Bayangan

Panggil this.attachShadow({ mode: "open" }) daripada pembina elemen tersuai atau connectedCallback. Kaedah ini mengembalikan ShadowRoot yang boleh anda isi seperti pepohon DOM biasa menggunakan innerHTML, appendChild dan sebagainya.

class MyCard extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: "open" });
    shadow.innerHTML = "<style>p{color:red}</style><p>Hello</p>";
  }
}

Mod Terbuka berbanding Tertutup

mode: "open" mendedahkan pepohon bayangan sebagai element.shadowRoot. mode: "closed" menyembunyikannya — element.shadowRoot mengembalikan null, jadi skrip luar tidak boleh memasuki pepohon itu. Mod tertutup jarang berguna dalam amalan kerana kod yang mentakrifkan elemen itu masih boleh menyimpan rujukannya sendiri.

Pengkapsulan Gaya

Gaya yang ditakrifkan di dalam pepohon bayangan melalui <style> atau helaian gaya yang diterima pakai hanya terpakai dalam pepohon bayangan itu. Pemilih CSS dalam dokumen utama tidak pernah sepadan dengan keturunan bayangan, dan gaya bayangan tidak pernah merentas keluar ke dokumen.

Pemilih :host

Dari dalam pepohon bayangan, elemen hos, iaitu elemen tersuai itu sendiri, dipilih dengan kelas pseudo khas :host. :host(.large) sepadan apabila hos mempunyai kelas .large; :host([disabled]) sepadan apabila hos mempunyai atribut disabled.

:host {
  display: block;
  padding: 16px;
  border: 1px solid #ccc;
}
:host([disabled]) {
  opacity: 0.5;
  pointer-events: none;
}

Paparan Blok pada Elemen Tersuai

Elemen tersuai secara lalai menggunakan display: inline. Di dalam punca bayangan, gunakan :host { display: block } supaya elemen itu berkelakuan seperti komponen peringkat blok. Terlupa melakukan ini ialah punca lazim pepijat "my width: 100% is being ignored".

Gubahan Peristiwa

Peristiwa yang menggelembung keluar daripada pepohon bayangan disasarkan semula pada hos. Klik pada butang dalaman sampai kepada pendengar luar dengan event.target === host. Gunakan event.composedPath() untuk melihat sasaran dalaman sebenar jika anda memerlukannya.

composed: true untuk Peristiwa Tersuai

Peristiwa tersuai yang dihantar di dalam akar bayang tidak melintasi sempadan melainkan anda menciptanya dengan kedua-dua bubbles: true dan composed: true. Tanpa composed, pendengar luar pada hos tidak akan melihat peristiwa itu.

Skrip Tidak Boleh Meresap Masuk

Skrip luar boleh membuat pertanyaan pada elemen hos tetapi tidak pada keturunan bayangnya. document.querySelector("my-card span") tidak mengembalikan apa-apa jika <span> itu berada di dalam pepohon bayang. Pengkapsulan melindungi bahagian dalaman daripada gandingan tidak sengaja.

DOM Bayang Deklaratif

Dengan <template shadowrootmode="open"> di dalam HTML sesuatu elemen, pelayar membina pepohon bayang pada masa penghuraian tanpa JavaScript. Ini menjadikan komponen yang dipaparkan oleh pelayan serasi dengan hidrasi kerana pepohon bayang telah wujud sebelum JS dijalankan.

Pertimbangan Prestasi

Setiap akar bayang mempunyai overhed — skop gaya tambahan dan lapisan pemaparan tambahan. Ratusan akar bayang tidak menjadi masalah; puluhan ribu mungkin memberi kesan. Untuk antara muka pengguna yang sangat padat seperti jadual besar dan senarai tervirtualisasi, lakukan pemprofilan untuk mengesahkan bahawa kos DOM bayang boleh diterima.

Semakan Pengetahuan

Apakah yang dilakukan oleh mod terbuka yang tidak dilakukan oleh mod tertutup?

Jawab dalam pelajaran interaktif

Ringkasan

attachShadow({ mode: "open" }) mencipta subpepohon DOM terasing yang menghalang CSS dan ID daripada meresap masuk atau keluar. Gayakan hos dengan :host, ingat untuk menggunakan display: block, dan gunakan composed: true bagi peristiwa yang mesti keluar. Selain itu, pepohon bayang berkelakuan seperti DOM biasa — innerHTML, appendChild dan querySelector semuanya berfungsi seperti biasa di dalamnya.

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 “attachShadow dan Punca Bayangan” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran HTML Academy, termasuk “attachShadow dan Punca 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 “attachShadow dan Punca Bayangan”?

Cipta pepohon bayangan terenkapsulasi pada elemen hos 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 1 daripada 4.

Berapa lamakah pelajaran “attachShadow dan Punca 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