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

Question

I try so solve the following problem. Please, see example:
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%;}
...
The example above works as expected: all the styles applied to ui-nav (using classes) inherited by all div child elements. However, what if I need to add additional classes to ui-nav in different case? For example
<ui-nav> <!-- case 1 -->
<div>Content</div>
...
</ui-nav>
<ui-nav class="border-green"> <!-- case 2 -->
<div>Another content</div>
...
</ui-nav>
In the example border-green will break the logic, because it overwrites predefined classes previously defined in class attribute of polymer-element. I tried to apply classes on content tag, but it doesn't work. As well as the following form doesn't work too:
<polymer-element name="ui-nav" noscript>
<template>
<div class="_row _columned _cols-2 mobile_cols-12">
<content></content>
</div>
</template>
</polymer-element>
So how can I apply already existing classes like _row _cols-2 to the elements of lightDOM without defining additional classes/styles using ::shadow, ::content etc?

Answer 1

The short answer is you can't.
You could include your stylesheet that contains these styles in your template, and use the last option where you wrap the content in a div with those classes, but that is likely to have some performance issues as the stylesheets will be inlined at runtime.
The only other option really is to use some shadow boundary piercing selector like ::shadow, /deep/, etc from your main stylesheet.