如何讓陰影大教堂與李斯一起工作？

我正在使用聚合物玩弄影子dom。我有我覺得應該是一個簡單的用例，我不能工作。我想定義一個可以包含導航鏈接的「導航」容器。我想它看起來如下：如何讓陰影大教堂與李斯一起工作？

<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>

以下是我的兩個元素的定義是相同（使用引導主題-ING的風格）：

<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>

檢查陰影Dom，這兩個元素都似乎獨立工作 - top-nav創建了ul，nav-link創建了包含a的li。問題是，li的似乎不是ul的孩子。我在這裏錯過了什麼？

來源

2014-04-02 dave mankoff

'nav'不是有效的自定義元素名稱。名字中必須有一個短劃線（例如，'x-nav'，'my-nav'等）。 – ebidel

@ebidel好的。更改爲「頂級導航」。 –

li元素歸nav-link所有。有沒有辦法讓nav-link消失在此設置，讓你的樹看起來像：

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

相反，你可以讓你的nav-link是，一個li（而不是有-A），並解決此問題。製作時的nav-link

化妝定義擴展li

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

使用類型擴展語法nav-link

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

這裏全部放在一起： http://jsbin.com/vecil/2/edit

來源

2014-04-06 18:28:25

這似乎解決了這個問題，謝謝！任何想法爲什麼影子錨的文本是不可點擊的？ –

如果我正確讀取的問題，我覺得最核心的問題是引導的CSS是這樣寫的：

.nav-tabs > li

而且你想重新創建，但鑑於當前的結構陰影邊界阻止它。如果你堅持你的當前設置，那麼你就需要讓他們看起來像這樣重寫那些引導選擇：

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

但是，這可能不是你想要的東西:)如果你去這條路線，那麼你會最終重寫Bootstrap。這突出表明了一個非常重要的觀點：Bootstrap是在Shadow DOM之類的工具存在之前編寫的，所以它並不總是輕鬆移植。

直到我們有了用Shadow DOM編寫的下一代UI框架，我認爲偶爾會出現像這樣的情況，可能會更容易創建自己的借用Bootstrap樣式的元素。試圖拼湊Shadow DOM與他們的選擇器完全匹配可能比它的價值更努力。

來源

2014-04-06 05:18:45 robdodson

如何讓陰影大教堂與李斯一起工作？

回答

相關問題