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（使用类）的所有样式都由所有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>

那么我怎样才能将现有的类如_row _cols-2应用于lightDOM的元素，而无需使用::shadow，::content等来定义其他类/样式？

Answer 1

简短的回答是你不能。

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

唯一的另一个选择就是在主样式表中使用一些阴影边界穿孔选择器，如:: shadow，/ deep /等。

如何从shadowDOM设置lightDOM样式（不使用:: content）？

1 个答案: