Di Alat Pengembang Google Chrome, saya melihat #shadow-rootkanan di bawah <html lang="en">tag. apa fungsinya dan untuk apa itu digunakan? Saya tidak melihatnya di Firefox maupun di IE; hanya di Chrome, apakah ini fitur khusus?
Jika saya membukanya, itu menunjukkan <head>dan <body>dan tautan di samping bernama reveal, dengan mengklik, itu menunjuk ke <head>dan <body>, tidak ada yang lain.
Jawaban:
Ini adalah indikator khusus bahwa Shadow DOM ada. Ini telah ada selama bertahun-tahun, tetapi pengembang tidak pernah diberikan API ke dalamnya sampai saat ini. Chrome telah memiliki fungsi ini untuk sementara waktu, browser lain masih mengejar. Ini dapat diubah di DevTools Settings di bawah bagian "Elemen". Hapus centang pada "Show User Agent Shadow DOM". Ini setidaknya akan menyembunyikan semua Shadow DOM yang dibuat secara internal (seperti elemen tertentu). Saya tidak yakin apakah itu mempengaruhi yang dibuat pengguna, seperti elemen kustom.
Ini muncul dalam hal-hal seperti iframe juga, di mana Anda memiliki pohon DOM terpisah yang bersarang di dalam yang lain.
Shadow DOM hanya mengatakan bahwa beberapa bagian halaman, memiliki DOM sendiri di dalamnya. Gaya dan skrip dapat dicakup dalam elemen itu sehingga apa yang berjalan di dalamnya hanya dijalankan dalam batas itu.
Ini adalah salah satu bagian utama yang diperlukan agar Komponen Web berfungsi. Yang merupakan teknologi baru yang memungkinkan pengembang untuk membangun komponen enkapsulasi mereka sendiri yang dapat digunakan oleh pengembang seperti elemen HTML lainnya.
Sebagai contoh Shadow DOM, saat Anda memiliki <video>tag di halaman web, ini ditampilkan hanya sebagai satu tag di DOM utama, tetapi jika Anda mengaktifkan Shadow DOM, Anda akan dapat melihat HTML pemutar video (DOM pemutar).
Ini dijelaskan dengan tepat dalam artikel ini, http://webcomponents.org/articles/introduction-to-shadow-dom/
Dalam kasus komponen web, ada masalah mendasar yang membuat widget yang dibuat dari HTML dan JavaScript sulit digunakan.
Masalah : Pohon DOM di dalam widget tidak dikemas dari bagian halaman lainnya. Kurangnya enkapsulasi ini berarti lembar gaya dokumen Anda mungkin tidak sengaja diterapkan ke bagian-bagian di dalam widget; JavaScript Anda mungkin secara tidak sengaja mengubah bagian di dalam widget; ID Anda mungkin tumpang tindih dengan ID di dalam widget dan seterusnya.
Shadow DOM mengatasi masalah enkapsulasi pohon DOM .
Misalnya, jika Anda memiliki markup seperti ini:
<button>Hello, world!</button>
<script>
var host = document.querySelector('button');
var root = host.createShadowRoot();
root.textContent = 'こんにちは、影の世界!';
</script>lalu alih-alih
Hello, world!halaman Anda terlihat seperti
こんにちは、影の世界!Tidak hanya itu, jika JavaScript pada halaman menanyakan apa textContent tombol itu, itu tidak akan didapat “こんにちは、影の世界!”, tetapi “Hello, world!” karena subtree DOM di bawah shadow root dienkapsulasi .
CATATAN : Saya telah mengambil konten di atas dari https://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/ karena membantu saya memahami shadow DOM sedikit lebih baik daripada jawaban yang sudah ada di sini. Saya telah menambahkan konten yang relevan di sini sehingga membantu orang lain tetapi lihat tautan untuk diskusi terperinci tentang hal yang sama.