如何从 shadow DOM 设置 light DOM 的样式（不使用 ::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%;}
...

上面的示例按预期工作：应用于 ui-nav 的所有样式（使用 classes）由所有 div 子元素继承。但是，如果我需要在不同的情况下向 ui-nav 添加额外的 class 怎么办？例如

<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 的 class 属性中定义的预定义 classes。我试图在 content 标签上应用 classes，但它不起作用。以及以下表格也不起作用：

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

那么我怎样才能将已经存在的 class 像 _row _cols-2 应用到 lightDOM 的元素，而不用使用 ::shadow、::content 等定义额外的 classes/styles ？

Answer 1

简短的回答是你不能。

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

真正唯一的其他选择是使用主样式表中的阴影边界穿刺选择器，如 ::shadow、/deep/ 等。

如何从 shadow DOM 设置 light DOM 的样式（不使用 ::content）？

How to style lightDOM from shadowDOM (without using ::content)?

html

shadow-dom

polymer

dart-polymer