cs slot
Tag Slot HTML
Tag <slot> HTML
Terakhir diperbarui: 23 Juli 2025
Slot adalah bagian dari teknologi komponen web yang berfungsi sebagai tempat penampung di dalam komponen yang dapat diisi dengan markup sendiri, memungkinkan pembuatan pohon DOM terpisah dan menampilkannya bersama-sama.
Sintaks
<slot> <h1>Judul</h1></slot>Atribut
- name: Menjelaskan nama slot.
Pendekatan
Elemen-elemen berikut digunakan dalam contoh kode di bawah ini:
- Template: Elemen template digunakan untuk mendeklarasikan fragmen HTML yang akan disisipkan ke dalam dokumen melalui skrip. Konten tidak dirender sampai ditambahkan ke dokumen melalui skrip. Bagian ini berisi elemen
<slot>. - Konten: Bagian ini berisi konten yang disisipkan di tempat elemen
<slot>berada di dalam template. Dalam kasus ini, elemen<span>akan berada di tempat elemen slot tersebut. Setiap elemen span merujuk ke elemen<slot>tertentu melalui atribut slot-nya. CSS apa pun yang disertakan dalam template hanya diterapkan pada pohon DOM tersebut dan tidak memengaruhi halaman lainnya. - Skrip: Daftar pertama menyisipkan
<slot>dengan elemen, tetapi daftar kedua tidak. Gaya utama dideklarasikan di dalam elemen template, yang berarti hanya diterapkan pada elemen HTML dalam pohon DOM bayangan tersebut. Jika gaya berada di luar elemen template, gaya tersebut hanya diterapkan pada daftar kedua, sehingga daftar pertama tanpa gaya.
Contoh
<!DOCTYPE html><html lang="en"><head> <style> h1 { font-size: 2.2em; font-family: Arial, Helvetica, sans-serif; color: coral; } dl { border-left: 5px solid yellowgreen; padding-left: 1em; } dt { font-weight: bold; font-size: 2em; } dd { color: darkslategray; font-size: 1.6em; } </style></head><body> <template> <h1><slot name="heading"></slot></h1> <dl> <dt><slot name="parent-1"></slot></dt> <dd><slot name="child-1"></slot></dd> <dt><slot name="parent-2"></slot></dt> <dd><slot name="child-2"></slot></dd> </dl> </template> <section> <span slot="heading">Judul</span> <span slot="parent-1">Induk 1</span> <span slot="child-1">Anak 1: portal ilmu komputer</span> <span slot="parent-2">Tag Slot</span> <span slot="child-2">Buat pohon DOM terpisah dan tampilkan bersama.</span> </section> <script> let dlTemplate = documentelector('template').content; let sections = documentelectorAll('section'); sectionsh(function (section) { sectionShadow({ mode: 'open' }).appendChild( dlTemplateode(true) ); }); </script></body></html>Browser yang Didukung
- Chrome 53 dan yang lebih baru
- Edge 79 dan yang lebih baru
- Firefox 63 dan yang lebih baru
- Opera 40 dan yang lebih baru
- Safari 10 dan yang lebih baru
- Internet Explorer tidak didukung
© 2026 - Semua hak dilindungi undang-undang. PT dengan modal Rp 10.000.000.000. Jl. Jend. Sudirman Kav. 52-53, Jakarta Selatan 12190
