2013-02-11 40 views
13

मैंने आज कुछ अजीब देखा है। पोस्ट (नीचे) से संबंधित चित्रों को देखें। मैंने इनपुट किया है [टाइप = "टेक्स्ट"]। स्क्रीन तस्वीर पर यह "1" है। यह सीएसएस ऐसा कुछ दिखता है;इनपुट के अंदर छाया रूट div

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

इसके अलावा एक सामान्य इनपुट, इसके अलावा कोई सीमा नहीं है।

फिर, मैंने देव-टूल्स को देखा, और मैंने कुछ ऐसा देखा जो मैंने पहले कभी नहीं देखा था। एक इनपुट के अंदर "# छाया-रूट" और एक div।

मुझे पता है कि देव-उपकरण मूल वेबपृष्ठ पर संकेत प्रदर्शित करने के लिए स्वयं कुछ जोड़ते हैं। हालांकि, मैं वास्तव में उत्सुक हूं कि यह इनपुट के अंदर एक div क्यों जोड़ता है, और वेबकिट इंजन पर ऐसा कुछ भी प्रस्तुत करना वास्तव में संभव है।

क्रोम देव-टूल्स आखिरी बार अजीब हैं, मुझे इसके साथ कुछ समस्याएं थीं। उदाहरण के लिए, यह style.css फ़ाइल को दोगुना कर देता है और एक और लोड करने के लिए भूल जाता है जो jquery कैलेंडर के भयानक रूप का कारण था (केवल मेरे ब्राउज़र पर लोड होने पर)।

यह शायद एक बग है, लेकिन सुविधा नहीं है, लेकिन मैं और अधिक जानना के बारे में यह

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

This input visible from the dev-tools side

उत्तर

9

कि छाया डोम है अच्छा लगेगा।

बस विकल्पों पर क्लिक करें और अक्षम करें "दिखाएँ छाया डोम" विकल्प ..

W3C मसौदा https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html

पर और संबंध में क्रोम को पाया जा सकता है देखने के http://chemicaloliver.net/programming/inspecting-the-shadow-dom-in-google-chrome-inspector/

+0

हाय, एक तरह से देर से यहाँ है, लेकिन मैं एक मुद्दा जहां हो रही है छाया डोम (# छाया-रूट) एक बीआर जोड़ रहा है पेज के शीर्ष पर एकिंग लाइन। मैंने छाया डॉम विकल्प, किसी भी विचार को पहले से ही बंद कर दिया है? – andufo

+0

@andufo छाया पर चर्चा की गई डोम केवल डेवलपर टूल को संदर्भित करती है। आप कैसे जानते हैं कि आपकी समस्या छाया डोम के साथ है और वास्तविक HTML/CSS नहीं है? –

+0

@ गैबी-उर्फ-जी-पेट्रीओली मैं पहले से ही कई चेक चलाता हूं, यह निश्चित रूप से क्रोम में ही हो रहा है। – andufo

5

जैसा गैबी पेट्रीओली ने बताया, यह छाया डोम है। यह ब्राउज़र द्वारा तृतीय पक्ष पुस्तकालयों, et al के लिए HTML में एक encapsulation इंटरफ़ेस प्रदान करने के लिए बनाया गया है।

Encapsulation एक ओओपी अवधारणा है जिसमें ऑब्जेक्ट्स अपने डेटा तक पहुंच प्रतिबंधित कर सकते हैं ताकि तृतीय-पक्ष कोड मनमाने ढंग से इसे मिटा नहीं सके।

एचटीएमएल में किसी भी encapsulation क्षमताओं की कमी है, जो विशेष रूप से तीसरे पक्ष के पुस्तकालयों (jQuery, ट्विटर बटन, आदि) के लिए एक समस्या है। डीओएम के विभिन्न उप-समूहों के लिए कार्यात्मक encapsulation प्रदान करने के लिए छाया DOM का आविष्कार का आविष्कार किया गया था। यह दस्तावेज पेड़ (और एक दूसरे) से अलग कार्यात्मक subtrees को रखकर हासिल किया जाता है। छाया डोम subtrees के इस अलगाव छाया छाया के रूप में जाना जाता है। सीएसएस नियमों और डोम प्रश्नों छाया सीमा को पार नहीं करते हैं, और इस तरह कैप्सूलीकरण प्रदान (1)

के रूप में डोमिनिक कूनी डाल दिया:। यहाँ एक मौलिक समस्या यह है कि करने के लिए कठिन और JavaScript से निर्मित विगेट्स बना देता है उपयोग करें: विजेट के अंदर डोम पेड़ शेष पृष्ठ से encapsulated नहीं है। Encapsulation की कमी का मतलब है कि आपका दस्तावेज़ स्टाइलशीट विजेट के अंदर भागों में गलती से लागू हो सकता है; आपकी जावास्क्रिप्ट विजेट के अंदर भागों को गलती से संशोधित कर सकता है; आपकी आईडी विजेट के अंदर आईडी के साथ ओवरलैप हो सकती है; और इसी तरह।(2)

अतिरिक्त पठन:

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