Cara Menggunakan HTML & Dengan Shadow DOM
Slot HTML adalah salah satu standar paling luar biasa yang dibuat oleh W3C. Kombinasikan itu dengan standar W3C mengesankan lainnya yang disebut template, dan Anda memiliki ramuan yang luar biasa untuk dikerjakan. Dapat buat dan tambahkan elemen HTML ke halaman menggunakan JavaScript adalah tugas yang perlu dan penting.
Ini berguna ketika cuplikan kode harus hanya muncul pada waktu-waktu tertentu, atau ketika Anda tidak ingin mengetik ratusan elemen HTML yang terstruktur serupa tetapi ingin mengotomatiskan proses.
Membuat elemen HTML dalam JavaScript adalah tidak begitu diinginkan. Ini merepotkan harus memeriksa dan mengecek kembali jika Anda telah menutupi semua tag, menempatkannya dalam urutan yang benar, semuanya, hanya ada terlalu banyak untuk mengetik dan melacak. Namun kekacauan ini, punya solusi ketika tag muncul. Jika sesuatu perlu ditambahkan ke halaman secara dinamis, Anda dapat memasukkannya ke dalam elemen.
Dalam posting ini, saya akan menunjukkan kepada Anda bagaimana Anda dapat menggunakan tag bersama dengan JavaScript untuk buat pabrik tabel HTML mini yang dapat membuat dan mengisi ratusan tabel serupa.
Itu
Itu Tag memegang kode HTML itu tidak akan ditampilkan oleh browser sampai ditambahkan dengan benar ke dokumen, menggunakan JavaScript. Itu elemen.
SEBUAH Bayangan DOM mirip dengan DOM biasa (model dokumen diuraikan dari HTML). Saya t menciptakan pohon scoped (Pohon Shadow DOM), yang memiliki a root sendiri dan dapat juga memiliki gaya tersendiri.
Ketika Anda memasukkan pohon Shadow DOM ke dalam elemen di dokumen utama - elemen tersebut kemudian akan disebut host bayangan -, semua elemen anak dari host bayangan yang ditandai dengan slot atribut (tidak sama dengan yang disebutkan di atas
The Shadow DOM, pada penulisan artikel ini (Juli 2017), adalah hanya didukung di browser berbasis WebKit dan Blink tetapi Anda dapat memeriksa status dukungan browser yang sebenarnya di CanIUse kapan saja.
Menyiapkan HTML
Masih membingungkan? Mari kita lihat beberapa kode, dimulai dengan elemen.
Dalam Di dalam templat, Saya juga menambahkan beberapa gaya dasar untuk tabel, menggunakan , ada baik gunakan sebagai cetak biru untuk membuat beberapa tabel yang akan ditambahkan ke dokumen. Ada
dan ) bertindak sebagai penampung untuk judul kolom dan nilai sel. Setiap slot memiliki keunikan nama atribut itu mengidentifikasinya.