如何從shadowDOM設計lightDOM風格（不使用:: content）？

Question

我試着解決以下問題。請參見例如：

定製elements.html

<polymer-element name="ui-nav" class="_row _columned _cols-2 mobile_cols-12" noscript> 
    <template> 
    <content></content> 
    </template> 
</polymer-element> 

的index.html

<ui-nav> 
    <div>Привет русским</div> 
    <div>Контакты</div> 
    <div>О себе</div> 
</ui-nav> 

的main.css

._row {display: block;} 
._row [class*="_cols-"] {float:left;} 
._cols-2 > * {width: 20%;} 
... 

上面的示例按預期方式工作：適用於所有div子元素繼承的ui-nav（使用類）的所有樣式。但是，如果我需要在不同情況下向ui-nav添加其他類，該怎麼辦？例如

<ui-nav> <!-- case 1 --> 
    <div>Content</div> 
    ... 
</ui-nav> 

<ui-nav class="border-green"> <!-- case 2 --> 
    <div>Another content</div> 
    ... 
</ui-nav> 

在該示例border-green將打破的邏輯，因爲它會覆蓋先前的polymer-element類屬性中定義的預定義的類。我試圖在content標籤上應用課程，但它不起作用。除了以下形式不工作過：

<polymer-element name="ui-nav" noscript> 
    <template> 
    <div class="_row _columned _cols-2 mobile_cols-12"> 
     <content></content> 
    </div> 
    </template> 
</polymer-element> 

因此，如何我可以申請現有的類，如_row _cols-2到lightDOM的元素，而無需使用::shadow，::content等定義其他類/樣式？

Answer 1

簡短的答案是你不能。

您可以將包含這些樣式的樣式表包含在您的模板中，並使用最後一個選項將這些類中的內容包裝到div中，但這可能會帶來一些性能問題，因爲樣式表將在運行。

唯一的其他選擇其實是在主樣式表中使用陰影邊界穿透選擇器，如:: shadow，/ deep /等。