Google Chrome'un Geliştirici Araçlarında, etiketinin #shadow-rootaltında bir sağ görüyorum <html lang="en">. ne işe yarar ve ne için kullanılır? Firefox'ta veya IE'de görmüyorum; yalnızca Chrome'da, bu özel bir özellik mi?
Ben gösterileri onu, açarsanız <head>ve <body>adlandırılmış yanında bir bağlantı revealtıklayarak, bu işaret <head>ve <body>, başka bir şey.
Yanıtlar:
Bu, bir Gölge DOM'un var olduğunun özel bir göstergesidir . Bunlar yıllardır var oldu, ancak geliştiricilere yakın zamana kadar hiç API verilmemişti. Chrome bir süredir bu işleve sahipken, diğer tarayıcılar hala yetişiyor. "Öğeler" bölümünün altındaki DevTools Ayarlarında değiştirilebilir. "Kullanıcı Aracısı Gölge DOM'u Göster" seçeneğinin işaretini kaldırın. Bu, en azından dahili olarak oluşturulan tüm Shadow DOM'ları gizleyecektir (belirli öğeler gibi.) Özel öğeler gibi kullanıcı tarafından oluşturulanları etkileyip etkilemediğinden hemen emin değilim.
Bunlar, başka bir DOM ağacının içine yerleştirilmiş ayrı bir DOM ağacınızın olduğu iframe'ler gibi şeylerde de ortaya çıkar.
Shadow DOM, basitçe sayfanın bir kısmının kendi DOM'un içinde olduğunu söylüyor . Stiller ve komut dosyası, bu öğe içinde kapsama alınabilir, böylece içinde çalışan şeyler yalnızca bu sınırda yürütülür.
Bu, Web Bileşenlerinin çalışması için gereken birincil parçalardan biridir . Bu, geliştiricilerin, geliştiricilerin diğer herhangi bir HTML öğesi gibi kullanabileceği kendi kapsüllenmiş bileşenlerini oluşturmasına olanak tanıyan yeni bir teknolojidir.
Gölge DOM'a bir örnek olarak <video>, bir web sayfasında bir etiketiniz olduğunda , bu etiket ana DOM'da yalnızca bir etiket olarak gösterilir, ancak Gölge DOM'u etkinleştirirseniz, video oynatıcının HTML'sini (oynatıcı DOM) görebileceksiniz.
Bu, bu makalede uygun bir şekilde açıklanmıştır: http://webcomponents.org/articles/introduction-to-shadow-dom/
Web bileşenleri söz konusu olduğunda, HTML ve JavaScript'ten oluşturulan widget'ların kullanımını zorlaştıran temel bir sorun vardır.
Sorun : Bir pencere öğesinin içindeki DOM ağacı, sayfanın geri kalanından kapsüllenmemiş. Bu kapsülleme eksikliği, belge stil sayfanızın pencere öğesi içindeki parçalara yanlışlıkla uygulanabileceği anlamına gelir; JavaScript'iniz yanlışlıkla pencere öğesi içindeki parçaları değiştirebilir; Kimlikleriniz, widget'ın içindeki kimliklerle çakışabilir vb.
Gölge DOM, DOM ağaç kapsülleme sorununu giderir .
Örneğin, aşağıdaki gibi işaretlemeniz varsa:
<button>Hello, world!</button>
<script>
var host = document.querySelector('button');
var root = host.createShadowRoot();
root.textContent = 'こんにちは、影の世界!';
</script>
o zaman yerine
Hello, world!
sayfan şöyle görünüyor
こんにちは、影の世界!
Sadece bu değil, sayfadaki JavaScript düğmenin textContent öğesinin ne olduğunu sorarsa, elde etmeyecek “こんにちは、影の世界!”, ancak “Hello, world!” gölge kökün altındaki DOM alt ağacı kapsüllendiği için .
NOT : Yukarıdaki içeriği https://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/ adresinden aldım çünkü gölge DOM'u burada zaten verilen cevaplardan biraz daha iyi anlamama yardımcı oldu. Başkalarına yardımcı olması için buraya alakalı içerik ekledim, ancak aynı konuda ayrıntılı tartışma için bağlantıya bir göz atın.