如何从阴影 DOM 中设置轻量级 DOM 的样式（不使用 ::content）？答案

【问题标题】：How to style lightDOM from shadowDOM (without using ::content)?如何从阴影 DOM 中设置轻量级 DOM 的样式（不使用 ::content）？
【发布时间】：2015-04-24 07:53:57
【问题描述】：

我尝试解决以下问题。请看示例：

custom-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%;}
...

上面的示例按预期工作：应用于ui-nav（使用类）的所有样式都由所有div 子元素继承。但是，如果我需要在不同情况下向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>

那么，如何在不使用 ::shadow、::content 等定义其他类/样式的情况下将现有的类（如 _row _cols-2）应用到 lightDOM 的元素？

【问题讨论】：

标签： html polymer dart-polymer shadow-dom

【解决方案1】：

简短的回答是你不能。

您可以在模板中包含包含这些样式的样式表，并使用最后一个选项将内容包装在带有这些类的 div 中，但这可能会出现一些性能问题，因为样式表将在运行时内联.

唯一的其他选择实际上是在主样式表中使用一些阴影边界穿透选择器，例如 ::shadow、/deep/ 等。

【讨论】：