Temu duga Frontend: Reka bentuk Shadow DOM deklaratif dengan penghidratan progresif

Gesaan dan skop

Halaman ini menstrim kad produk daripada pelayan. Setiap kad harus merender kandungan yang bermakna tanpa JavaScript, memastikan gaya komponen diasingkan, dan melampirkan tingkah laku apabila bungkusan klien tiba. Gunakan punca bayang (shadow root) deklaratif, kemudian huraikan peningkatan progresif untuk pelayar yang tidak menghurai atribut tersebut dan untuk elemen tersuai yang ditingkatkan selepas HTML wujud.

Kemahiran teras ialah perenderan pelayar, sempadan komponen, dan ketepatan penghidratan, jadi ini tergolong dalam frontend.

Perkara yang dinilai oleh penemu duga

Pertama, adakah anda tahu bahawa templat yang membawa shadowrootmode="open" atau "closed" ditukar oleh penghurai HTML menjadi shadow root apabila disokong?

Kedua, bolehkah anda menerangkan bahawa hanya shadow root deklaratif pertama untuk sesuatu hos dilampirkan; yang berikutnya kekal sebagai templat dan memerlukan strategi sandaran yang disengajakan?

Ketiga, bolehkah anda mengekalkan slot, gaya, kebolehcapaian, dan tingkah laku borang merentas HTML pelayan dan peningkatan klien?

Keempat, bolehkah anda membezakan pemeriksaan open daripada enkapsulasi closed? Mod closed menyembunyikan rujukan shadowRoot; ia bukan sempadan keselamatan.

Kelima, bolehkah anda mengelakkan perenderan berganda, pendengar pendua, dan peristiwa yang hilang semasa penghidratan atau penstriman?

Soalan untuk dijelaskan terlebih dahulu

Pelayar dan mod respons renderan pelayan yang manakah disokong?
Adakah hos menjadi elemen tersuai serta-merta, atau bolehkah ia ditingkatkan kemudian?
Anak yang manakah diletakkan dalam slot, dan adakah pengguna perlu menggayakannya dengan ::slotted?
Adakah mod open diperlukan untuk ujian dan integrasi, atau adakah mod closed merupakan kekangan produk?
Adakah halaman menstrim komponen bersarang atau menghantar punca lengkap dalam satu respons?
Apakah sandaran apabila penghuraian deklaratif tidak tersedia?

Kerangka jawapan 30 saat

“Saya akan merender komponen pada pelayan dengan shadow root deklaratif dan sandaran light-DOM semantik, kemudian membiarkan peningkatan elemen tersuai melampirkan tingkah laku tanpa mencipta semula punca yang telah dihuraikan. Saya akan menggunakan slot untuk kandungan awam, mengekalkan gaya di dalam punca, memilih mod open atau closed sebagai keputusan integrasi dan bukannya kawalan keselamatan, dan mengesan ciri shadowRootMode. Penghidratan adalah idempoten, peristiwa diwakilkan atau diikat sekali sahaja, dan ujian merangkumi pelayar yang tidak disokong, susunan penstriman, slot, kebolehcapaian, dan pemasaan peningkatan.”

Jawapan langkah demi langkah

Langkah 1: Render punca semantik

Pelayan mengeluarkan hos dengan templat deklaratif. Pastikan teks dan kawalan bermakna supaya respons kekal berguna sebelum JavaScript. Gunakan open apabila perkakas atau integrasi memerlukan pemeriksaan; gunakan closed hanya apabila kontrak komponen sengaja menyembunyikan rujukan tersebut.

html

<product-card>
  <template shadowrootmode="open">
    <style>:host { display: block }</style>
    <article><slot name="title"></slot><button>Buy</button></article>
  </template>
  <span slot="title">Keyboard</span>
</product-card>

Penetapan slot adalah sebahagian daripada kontrak awam. Jangan menduplikasi tajuk di dalam kedua-dua pepohon bayang dan kandungan sandaran melainkan anda juga mengawal semantik kebolehcapaian.

Langkah 2: Tentukan kontrak peningkatan

Apabila kelas elemen tersuai ditakrifkan, kitaran hayatnya mesti mengesan shadow root sedia ada dan bukannya memanggil attachShadow sekali lagi. Mulakan keadaan sekali, ikat pendengar sekali, dan biarkan nod yang disediakan pelayan kekal di tempatnya. Jika pelayar tidak mencipta punca, elemen boleh menciptanya daripada templat atau merender sandaran light-DOM yang serasi.

Langkah 3: Kesan ciri dan laksanakan sandaran

Semak sokongan dengan kuar penghurai kecil atau sifat templat yang berkaitan sebelum bergantung pada tingkah laku deklaratif. Pelayar yang tidak disokong masih harus menerima kandungan light-DOM semantik; peningkatan bahagian klien boleh melampirkan shadow root kemudian, tetapi tidak boleh menyembunyikan kandungan semasa peralihan.

Langkah 4: Kekalkan slot dan gaya

Slot memancarkan anak light-DOM ke dalam pepohon bayang. Dokumentasikan slot dinamakan, tingkah laku slot lalai, dan had penggayaan seperti ::slotted. Kekalkan gaya komponen di dalam punca, dan dedahkan sifat tersuai atau parts yang disengajakan dan bukannya bergantung pada pemilih yang tidak boleh merentasi sempadan.

Langkah 5: Kendalikan penstriman dan penugasan bersarang

Penstriman boleh menghantar hos sebelum anak berslot bersarang atau sebelum takrifan elemen tersuai. Anggap susunan penghuraian sebagai keadaan yang dijangkakan: slot harus dikemas kini apabila anak tiba, dan peningkatan mesti selamat sebelum atau selepas penstriman selesai. Elakkan daripada menggantikan hos dengan pepohon kedua.

Langkah 6: Hidratkan tingkah laku tanpa kerja pendua

Lampirkan pengendali peristiwa sekali sahaja, sebaik-baiknya melalui wakil peringkat punca untuk kad yang berulang. Tandakan pemulaan dalam medan peribadi atau weak map, bukan atribut awam yang boleh ditulis ganti oleh pengguna. Kekalkan keadaan borang dan fokus apabila tingkah laku dilampirkan.

Langkah 7: Uji sempadan pelayar dan kebolehcapaian

Uji penghurai yang disokong dan tidak disokong, mod open dan closed, satu berbanding beberapa punca deklaratif, slot yang tiba lewat, peningkatan elemen tersuai sebelum dan selepas penghuraian, fokus papan kekunci, label, penyerahan borang, dan penghidratan selepas gangguan rangkaian. Sahkan terdapat satu pepohon kawalan interaktif dan tiada peristiwa pendua.

Jawapan model

“Saya akan menstrim hos semantik ditambah satu shadow root deklaratif, menggunakan slot dinamakan untuk kandungan awam, dan mengekalkan gaya di dalam punca. Peningkatan elemen tersuai terlebih dahulu memeriksa sama ada punca sudah wujud, supaya penghidratan mempertingkatkan markup pelayan dan bukannya menggantikannya. Mod open menyokong pemeriksaan; mod closed hanya menyembunyikan rujukan dan bukan sempadan keselamatan.

Saya akan mengesan sokongan penghurai dan mengekalkan kandungan sandaran light-DOM. Penstriman dan peningkatan lewat adalah keadaan normal, jadi unjuran slot dan pemulaan mestilah idempoten. Ujian merangkumi pelayar yang tidak disokong, punca bersarang, slot lewat, fokus, borang, kebolehcapaian, dan pencegahan peristiwa pendua.”

Kesilapan lazim

Memanggil attachShadow semasa setiap peningkatan → punca atau keadaan sedia ada hilang → gunakan semula punca yang telah dihuraikan.
Menganggap mod closed sebagai keselamatan → pemanggil masih boleh berinteraksi melalui tingkah laku yang didedahkan → dokumentasikannya sebagai enkapsulasi sahaja.
Menduplikasi kandungan sandaran dan bayang → pembaca skrin mungkin mengumumkannya dua kali → takrifkan satu sumber yang boleh diakses.
Andaikan slot tiba sebelum penghuraian selesai → anak yang distrim hilang daripada model mental → uji unjuran lewat.
Menggayakan kandungan berslot dengan pemilih dalaman → peraturan tidak merentasi sempadan → gunakan ::slotted, parts, atau sifat tersuai.
Mengikat pendengar pada setiap renderan → klik dicetuskan beberapa kali → jadikan penghidratan idempoten.
Menggugurkan sandaran light-DOM → pelayar yang tidak disokong menunjukkan kad kosong → kekalkan markup pelayan semantik.

Soalan susulan

Susulan 1: Adakah shadow root deklaratif sentiasa dilampirkan?

Tidak. Ia bergantung pada sokongan penghurai dan mod yang sah. Pelayar yang tidak disokong meninggalkan templat sebagai kandungan biasa, jadi sandaran atau peningkatan klien diperlukan.

Susulan 2: Mengapa hanya satu punca bagi setiap hos?

Penghurai melampirkan punca deklaratif pertama untuk hos tersebut; templat seterusnya kekal tersedia untuk pengendalian yang disengajakan dan bukannya mencipta punca yang bersaing.

Susulan 3: Bilakah memilih mod open?

Pilih mod open apabila ujian, integrasi, atau sambungan terkawal memerlukan rujukan punca. Ia tidak memberi atau mengalih keluar keistimewaan keselamatan.

Susulan 4: Bagaimanakah slot berfungsi semasa penstriman?

Hos boleh wujud sebelum anak yang diletakkan dalam slot; sebaik sahaja anak tiba, penetapan slot akan dikemas kini. Ujian harus merangkumi kedua-dua susunan ketibaan.

Susulan 5: Bagaimanakah anda mengelakkan ketakpadanan penghidratan?

Pastikan kontrak pelayan dan klien stabil, gunakan semula nod sedia ada, dan jadikan pemulaan idempoten dan bukannya merender pepohon kedua.

Susulan 6: Bagaimanakah anda menguji punca closed?

Uji tingkah laku yang boleh dilihat oleh pengguna, fokus, peristiwa, dan kebolehcapaian melalui kontrak awam; jangan bergantung pada membaca shadowRoot secara terus.