2013-02-11 20 views
13

Bugün tuhaf bir şey gördüm. Gönderi ile ilgili resimlere bakın (aşağıda). Bir giriş yaptım [type = "text"]. Ekran resmindeki "1". CSS böyle bir şey görünüyor;Gölge kök div girişi içinde

table tbody input { 
    width: 40px; 
    border: none; 
    height: 16px; 
} 

Sadece sıradan bir girdinin yanında bunun da bir sınırı yok.

Sonra, dev araçlara baktım ve daha önce hiç görmediğim bir şey gördüm. "# Shadow-root" ve bir girdinin içinde bir div.

Bu araç, orijinal web sayfasındaki ipuçlarını göstermek için kendileri tarafından bir şey eklediğini biliyorum. Bununla birlikte, neden bir girdi içinde bir div eklediğini gerçekten merak ediyorum ve bunun webkit motorunda böyle bir şey yapması mümkün.

Chrome araçları, geçen sefer biraz garip, bazı sorunlarım vardı. Örneğin, style.css dosyasını ikiye katladı ve jquery takviminin korkunç görüntüsünün sebebi olan (yalnızca tarayıcımda yüklü olduğunda) başka birini yüklemeyi unutuyor.

Muhtemelen bir hata, ama bir özellik değil, ama Gölge DOM olduğunu

Input visible in browser (it's not straight, adhoc screen)

This input visible from the dev-tools side

cevap

9

That hakkında daha fazla şey bilmek isterim.

Sadece "göster Gölge dom" W3C taslak https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html

de ve Chrome açısından bulunabilir

seçenekleri .. bkz http://chemicaloliver.net/programming/inspecting-the-shadow-dom-in-google-chrome-inspector/

+0

Merhaba, biraz geç burada, ama bir sorunu nereye yaşıyorum Shadow DOM (# shadow-root) bir bre ekliyor sayfanın üst kısmında aking hattı. Gölge DOM seçeneğini zaten kapattım, herhangi bir fikrin var mı? – andufo

+0

@andufo Burada ele alınan DOM, yalnızca geliştirici araçlarını ifade eder. Sorununuzun Shadow DOM ile ve gerçek HTML/CSS ile olmadığını biliyor musunuz? –

+0

@ gaby-aka-g-petrioli zaten birkaç çek çalıştı, kesinlikle sadece Chrome'da oluyor. – andufo

5
seçeneklerine tıklayın ve devre dışı

Gaby Petrioli'nin işaret ettiği gibi, burası Shadow DOM. Üçüncü taraf kütüphaneler için HTML'de bir kapsülleme arabirimi sağlamak için tarayıcı tarafından oluşturulur.

Kapsülleme, nesnelerin kendi verilerine erişimi kısıtlayabileceği bir OOP kavramdır, böylece üçüncü taraf kodu keyfi olarak silemez.

HTML, özellikle üçüncü taraf kitaplıkları (jQuery, twitter buttons, vb.) Için bir sorun olan tüm kapsülleme yeteneklerinden yoksundur. Shadow DOM, DOM'ın çeşitli alttuzları için işlevsel kapsülleme sağlamak amacıyla icat edildi. Bu, işlevsel alt bölümlerin belge ağacından (ve birbirinden) ayrı tutulmasıyla elde edilir. Gölge DOM alt sınıflarının bu ayrımı, gölge sınırı olarak bilinir. CSS kuralları ve DOM sorguları kapsülleme sağlamak ve böylece gölge sınırı geçmeye ve yok (1)

Dominic Cooney gibi:. İşte zor HTML ve JavaScript dışına inşa widget yapar temel bir sorundur kullanımı: Bir widget içindeki DOM ağacı, sayfanın geri kalanından kapsüllenmez. Bu kapsülleme yokluğu, belge stil sayfanızın yanlışlıkla widget içindeki bölümlere uygulanabileceği anlamına gelir; JavaScript'iniz, widget'ın içindeki parçaları yanlışlıkla değiştirebilir; kimliğiniz, widget'ın içindeki kimliklerle çakışabilir; ve bunun gibi.(2)

Ek Okuma:

Basic introductory description of the Shadow DOM

(1) A more complete technical description - the second part of this article explains how to use the Shadow DOM yourself

(2) Dominic Cooney's article: Shadow DOM 101

Shadow DOM - W3C Working Draft 17 June 2014