पॉलिमर: लाइट डोम बनाम स्थानीय डोम

Question

पॉलिमर के प्रकाश डीओएम और स्थानीय डोम के बीच क्या अंतर है? डॉक्स (1) से:

डोम कि एक तत्व बनाता है और प्रबंधन करता है अपने स्थानीय डोम कहा जाता है। यह तत्व के बच्चों से अलग है जिसे कभी-कभी स्पष्टता के लिए अपने प्रकाश डोम कहा जाता है।

यह बहुत मदद नहीं करता है। क्या प्रकाश डोम में बच्चों को शामिल नहीं किया जाना चाहिए और यदि ऐसा है तो स्थानीय डोम में क्या होता है?

[1] https://www.polymer-project.org/1.0/docs/devguide/local-dom

Answer 1

यहाँ अंतर समझाने के लिए एक उदाहरण है। मान लीजिए आप निम्न कस्टम तत्व है:

<dom-module id="x-foo"> 

    <template> 
    <div>I am local dom</div> 
    <content></content> 
    </template> 

    <script> 
    Polymer({ 
     is: 'x-foo' 
    }); 
    </script> 

</dom-module> 

और आप अपने दस्तावेज़ में इस तरह इसका इस्तेमाल:

<x-foo>I am light dom</x-foo> 

क्या कभी आप तत्व की टेम्पलेट में डाल दिया स्थानीय डोम है। जब आप इसका उपयोग करते हैं तो आप अपने कस्टम तत्व में बच्चों के रूप में क्या डालते हैं लाइट डोम है। इसलिए, स्थानीय डोम तत्व के निर्माता द्वारा निर्धारित किया जाता है, जबकि प्रकाश डोम तत्व के उपयोगकर्ता द्वारा निर्धारित किया जाता है। बेशक, जब आप दोनों अपने स्वयं के कस्टम तत्वों का निर्माण और उपयोग करते हैं तो आपके पास कुछ लचीलापन होता है जहां कहां रखा जाए।

Answer 2

यदि आप <a-component> घटक बनाते हैं, तो इसका अपना मार्कअप (यह टेम्पलेट) है जो स्थानीय डोम है। टेम्पलेट में <content></content> टैग (एक अनाम और एकाधिक नाम वाले) हो सकते हैं जहां बच्चों का अनुमान लगाया जाता है। बच्चों के रूप में जोड़ा गया सामग्री प्रकाश डीओएम में दिखाया गया है।

जब हम इसके साथ एक <a-component> है स्थानीय डोम

<dom-module id="a-component"> 
    <template> 
    <div>A</div> 
    <content></content> 
    <div>B</div> 
    </template> 
</dom-module> 

है और हम जैसे

<a-component> 
    <div>C</div> 
</a-component> 

तो <div>C</div> प्रकाश डोम में दिखाया गया है में उपयोग करें। ब्राउज़र में जिसके परिणामस्वरूप डोम तो लग रहा है

<div>A</div> 
    <div>C</div> 
    <div>B</div> 

कहाँ <div>A</div> और <div>B</div> जब <a-component> और छायादार या छाया डोम के भीतर से देखा जब घटक के बाहर से देखा है और <div>C</div> प्रकाश डोम में है स्थानीय डोम कहा जाता है की तरह ।

हम फिर से इस मार्कअप ले अगर हम पृष्ठ पर जोड़ना होगा

<a-component> 
    <div>C</div> 
</a-component> 

आप देखते हैं कि <div>C</div> सीधे घटक जबकि <div>A</div> और <div>B</div> छिपे हुए हैं के उपयोगकर्ता द्वारा जोड़ा जाता है (छाया में) और केवल पता चला बाद में जब <a-component> ब्राउज़र द्वारा संसाधित किया जाता है।

छायादार और छाया का भेद इस बारे में है कि पूर्ण छाया डोम सक्षम है या पॉलिमर के लिए नहीं है। छाया कुछ हद तक छाया को अनुकरण करती है लेकिन कुछ उल्लेखनीय मतभेदों के साथ, यही कारण है कि इसे एक अलग नाम मिला।