Ada elemen namanya <template> di HTML. Kegunaannya buat nyimpen "cetakan" atau template konten HTML yang bisa kita pakai lagi nanti.
Kerennya, isinya <template> ini nggak langsung tampil di halaman web, tapi disimpen dulu di kayak kotak khusus bernama DocumentFragment. Cocok banget buat bikin tabel, daftar, atau komponen UI yang munculnya dinamis.
Nah, yang bikin <template> ini spesial itu ada di atribut shadowrootmode. Kalau kita pakai ini, browser langsung bikin shadow DOM tanpa kita perlu nulis JavaScript ribet.
Tinggal set shadowrootmode jadi open atau closed, beres deh. Dulu ada atribut shadowroot tapi sekarang udah nggak dipakai, diganti sama yang ini.
Cara pakainya gampang, konten di dalam <template> itu bisa kita ambil pake template.content, terus kita clone buat disisipin ke halaman. Misalnya, buat nambahin baris baru di tabel. Atau, kalau pake shadowrootmode, <template> langsung berubah jadi shadow DOM yang isinya udah di-scope sama style-nya, jadi nggak bentrok sama bagian lain.
Sejak 2015, <template> ini udah stabil dan didukung sama semua browser modern kayak Chrome, Firefox, Safari, dan lainnya. Ada juga atribut eksperimental lain yang bisa ngatur lebih detail, tapi ya itu, masih coba-coba. Buat detailnya, langsung aja cek di MDN, mereka punya contoh kodenya lengkap. Intinya, <template> ini bikin kita lebih gampang ngatur struktur UI yang reusable dan isolated.