शैडो डोम को एक लिस्ट के साथ काम करने के लिए कैसे प्राप्त करें?

Question

मैं छाया डोम के साथ खेलने के लिए पॉलिमर का उपयोग कर रहा हूं। मेरे पास ऐसा लगता है जो मुझे लगता है कि एक साधारण उपयोग मामला होना चाहिए कि मैं काफी काम नहीं कर सकता। मैं एक "एनएवी" कंटेनर परिभाषित करना चाहता हूं जिसमें नौसेना लिंक हो सकते हैं।

<top-nav> 
    <nav-link href="#a">A</nav-link> 
    <nav-link href="#b">B</nav-link> 
    <nav-link href="#c">C</nav-link> 
    <nav-link href="#d">D</nav-link> 
</top-nav> 

निम्नलिखित परिभाषा है कि मैं दो तत्वों के लिए बनाई गई हैं (का उपयोग कर बूटस्ट्रैप विषय-इंग शैली के लिए):

<polymer-element name="top-nav" noscript> 
    <template> 
    <ul class="nav nav-tabs"> 
     <content></content> 
    </ul> 
    </template> 
</polymer-element> 

<polymer-element name="nav-link" attributes="href" noscript> 
    <template> 
    <li><a href="{{ href }}"><content></content></a></li> 
    </template> 
</polymer-element> 

छाया निरीक्षण मैं इसे की तरह निम्नलिखित देखना चाहते हैं डोम, दोनों तत्व स्वतंत्र रूप से काम करते प्रतीत होते हैं - top-navul बनाता है और nav-linkli बनाता है जिसमें a होता है। समस्या यह है कि liul के बच्चे प्रतीत नहीं होता है। मुझे यहां क्या समझ नहीं आ रहा है?

Answer 1

li तत्व nav-link के स्वामित्व में हैं। nav-link इस स्थापना में गायब करने के लिए कोई तरीका नहीं है, इसलिए की तरह अपने पेड़ दिखता है:

<top-nav> 
    <ul> 
    <nav-link> 
     <li> 
    ... 

इसके बजाय आप अपने nav-linkहै-एकli (के बजाय है-एक), और हल यह कर सकते हैं मुसीबत। nav-link की

1. मेकअप परिभाषा का विस्तार li

<polymer-element name="nav-link" extends="li" attributes="href" noscript>

1. उपयोग प्रकार- विस्तार वाक्य रचना जब बनाने nav-link

<li is="nav-link" href="#a">A</li>

यहां यह सब एक साथ रखा गया है: http://jsbin.com/vecil/2/edit

Answer 2

मैं सही ढंग से सवाल पढ़ रहा हूँ, तो मुझे लगता है कि मुख्य मुद्दा यह है कि बूटस्ट्रैप के CSS इस तरह लिखा है:

.nav-tabs > li 

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

.nav-tabs ::content nav-link::shadow li 

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

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