Shadow DOM Deklaratif

Shadow DOM tradisional dibuat melalui JavaScript (attachShadow). Untuk halaman yang dirender di server, ini berarti pohon bayangan kosong sampai JS berjalan—menggagalkan tujuan SSR untuk mengirimkan HTML lengkap pada byte pertama. Shadow DOM Deklaratif mengatasinya.

Sebuah <template> dengan shadowrootmode="open" mendeklarasikan akar bayangan dalam HTML saat penguraian. Peramban memasang akar bayangan ke elemen induk secara otomatis; konten template menjadi pohon bayangan. Tidak diperlukan JavaScript.

Shadow DOM Deklaratif memungkinkan komponen web yang benar-benar dirender di server: server menghasilkan seluruh pohon bayangan secara langsung, peramban menguraikan dan memasangnya sebelum JavaScript apa pun dijalankan, lalu JavaScript hidrasi dapat mengambil alih dari kondisi dasar yang sudah dirender sepenuhnya. Kini setara dengan SSR kerangka kerja.

Mode yang tersedia sama seperti pada attachShadow imperatif: shadowrootmode="open" mengekspos akar bayangan sebagai element.shadowRoot; shadowrootmode="closed" menyembunyikannya. Perilakunya identik dengan pasangan yang dipasang melalui JavaScript.

Peramban memasang akar bayangan saat pertama kali menemukan <template shadowrootmode>. Setelah terpasang, template digunakan dan dihapus—kueri terhadapnya nanti tidak mengembalikan apa pun. Ini sesuai dengan siklus hidup attachShadow: sebuah akar bayangan ada selama masa hidup elemen.

Anak ringan (elemen <p> di luar <template> dalam contoh) diproyeksikan ke elemen <slot> di dalam pohon bayangan, sama seperti pada DOM bayangan imperatif. Komposisinya identik; yang berbeda hanya mekanisme pemasangannya.

Jika <my-card> adalah elemen kustom yang terdaftar, proses peningkatan akan menggunakan akar bayangan yang sudah terpasang, bukan memanggil attachShadow lagi. Kelas elemen kustom dapat membaca this.shadowRoot dalam connectedCallback tanpa perlu membuatnya.

Lit-html render, komponen Astro, dan beberapa kerangka kerja lain kini menghasilkan DOM bayangan deklaratif sebagai bagian dari keluaran SSR. Membuatnya sendiri juga memungkinkan: sistem templat berbasis teks apa pun dapat menulis template shadowrootmode.

DOM bayangan deklaratif tersedia di Chrome, Edge, Safari, dan Firefox. Peramban lama mengabaikan elemen <template> secara diam-diam—konten di dalam template tidak terlihat, yang merupakan degradasi bertahap yang baik untuk lingkungan yang belum mendukungnya.

Untuk dukungan yang lebih luas, skrip kecil dapat menelusuri DOM dan mengubah template[shadowrootmode] menjadi akar bayangan yang sebenarnya. Jalankan skrip ini sebelum mendaftarkan elemen kustom apa pun agar peningkatan komponen berikutnya menemukan pohon bayangan yang diharapkan.

DOM bayangan deklaratif menggandakan struktur: konten <template> berada di dalam HTML meskipun juga sudah ditanamkan ke dalam kelas komponen. Untuk halaman dengan banyak komponen yang sama, hal ini memperbesar muatan. Kerangka kerja melakukan deduplikasi; SSR yang dibuat sendiri mungkin ingin melakukan hal yang sama.

Jika Anda menerbitkan komponen web dan memedulikan perenderan pada byte pertama atau optimisasi mesin pencari, adopsilah sekarang. Fitur ini stabil, didukung, dan secara drastis meningkatkan dukungan SSR untuk aplikasi berbasis komponen web. Fitur ini tidak berlaku untuk aplikasi yang tidak menggunakan DOM bayangan.

Masalah apa yang diatasi DOM Bayangan Deklaratif dibandingkan dengan attachShadow imperatif?

DOM Bayangan Deklaratif menggunakan <template shadowrootmode="open"> di dalam elemen kustom untuk memasang akar bayangan saat penguraian, tanpa memerlukan JS. Fitur ini memungkinkan SSR yang sebenarnya untuk komponen web: pohon bayangan, gaya tercakup, dan slot semuanya berfungsi sebelum hidrasi. Didukung di semua peramban modern; polyfill tersedia untuk peramban lama. Kerangka kerja seperti Lit dan Astro menghasilkannya secara otomatis.