Dukungan yang Ditingkatkan untuk Slot di Luar Shadow DOM

Dukungan yang Ditingkatkan untuk Slot di Luar Shadow DOM

Kami dengan senang hati mengumumkan beberapa peningkatan pada pengalaman menggunakan slot tanpa Shadow DOM di komponen Stencil. Didorong oleh banyak masukan dari komunitas, fitur populer ini sekarang seharusnya berfungsi dalam sebagian besar kasus.

Slot di Light DOM?

Slot, elemen inti dari web components, adalah tempat penampung di dalam komponen web yang dapat diisi dengan markup sendiri. Slot bersifat native pada Shadow DOM, tetapi Stencil melakukan polyfill perilaku tersebut agar berfungsi juga untuk komponen non-shadow. Seiring waktu, fitur ini banyak diadopsi di komunitas Stencil, dan dengan popularitas ini, beberapa keterbatasan mulai ditemukan. Dengan pemikiran ini, dilakukanlah upaya untuk membuat pengalaman menjadi lebih baik.

Pemecahan Bug

Ada banyak masalah yang telah ditangani seiring waktu (lihat daftar lengkapnya), tetapi yang paling berdampak meliputi:

• Elemen dirender dalam urutan yang salah. Ketika template komponen induk berisi komponen anak yang meneruskan konten slotnya, konten slot bersarang dapat berakhir dalam urutan yang salah.
• Penerapan atribut 'hidden' yang tidak tepat pada konten slot. Konten yang ditempatkan di slot mungkin salah mendapatkan atribut 'hidden' ketika ditempatkan melalui beberapa level komponen. Ini paling terlihat ketika tujuan akhir tidak membungkus slot dalam elemen tambahan (seperti span atau div).
• Menambah/menghapus anak di slot Stencil saat menggunakan React. Ketika React mengelola anak dari tag kontainer Stencil, ia gagal menambah dan menghapusnya dengan benar.

Beberapa perubahan tambahan terkait slot yang digunakan dalam komponen yang memanfaatkan enkapsulasi scoped juga dilakukan. Perubahan ini berada di belakang bendera konfigurasi kedua dan dimaksudkan untuk menyelaraskan polyfill slot Stencil lebih dekat dengan perilaku Shadow DOM asli. Daftar perubahan yang dikendalikan oleh bendera ini dapat ditemukan di sini.

Dengan rilis terbaru Stencil v4.12.1, diyakini bahwa semua masalah utama slot light DOM telah terselesaikan.

Mengaktifkan Peningkatan

Semua peningkatan slot di atas pada runtime Stencil telah ditambahkan selama Stencil v4. Meskipun yakin akan dampak positif dari perubahan ini, perubahan tersebut ditandai sebagai eksperimental di v4 untuk memberi waktu kepada komunitas untuk menguji perbaikan pada komponen Stencil mereka. Peningkatan ini akan menjadi default pada rilis Stencil v5 yang akan datang tahun ini.

Untuk mengaktifkan perbaikan, perbarui file konfigurasi Stencil Anda dengan mengatur opsi ekstra experimentalSlotFixes dan experimentalScopedSlotChanges menjadi true:

// config import { Config } from '@stencil/core'; export const config: Config = { extras: { experimentalSlotFixes: true, experimentalScopedSlotChanges: true } };

Baca lebih lanjut tentang cara mengkonfigurasi perbaikan slot di sini.

Mulai Menguji Perubahan Slot Sekarang

Dengan sebagian besar pekerjaan ini selesai, disarankan untuk mengaktifkan dan menguji perubahan ini sehingga kebenarannya dapat diverifikasi dalam berbagai kasus penggunaan. Rencananya, bendera ini akan diaktifkan secara default di Stencil v5. Jika ada yang masih mengalami masalah yang diklaim telah diperbaiki oleh bendera konfigurasi ini (atau menemukan masalah baru), silakan buka masalah baru dengan kasus reproduksi minimal. Membuka masalah baru akan membantu menjaga pengorganisasian dan memprioritaskan perbaikan!

Harap dicatat bahwa perbaikan terbaru ini tidak menangani masalah terkait SSR yang kadang disebutkan di berbagai PR Slot. Tenang saja, masalah terkait SSR ada dalam daftar yang akan segera ditangani!