Styling element.

[dil...@gmail.com]

Hello.

I'm trying to use Polymer in our corporate project and I have one question about styling.

I want to make some site template with our own polymer-element's but is any way to apply global css files to shadow-dom? We use Bootstrap2 in that template and our own css which extends some thinks but right now I need to specify that files in all element's which use some class attribute in shadow-dom.

I saw that in Dart is something like apply-author-styles but like I see it's dart functionality not Polymer so it's not work in our project or maybe I'm doing some think wrong.

Thx for any suggestions how to do it.

[Nickolas Daskalou]

Hi diltram,

I think what you're looking for is the /deep/ combinator.

It's quite powerful as it pierces all shadow boundaries and allows you to style any child in the shadow DOM.

There's an explanation and example usage in the style guide written by Eric Bidelman:

http://www.polymer-project.org/articles/styling-elements.html

Let us know if you have any questions.

Cheers,

Nick

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/0443ffea-322d-4c4d-b765-3f6ae6786c30%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Lubosz Kośnik]

Thx Nick for a response.

I saw that and I was trying to use that in two ways.

First:

I created a parent polymer-element for a whole site and then in template/style I wrote

:host /deep/ * {
   @import url('bootstrap2.css');
}

Second method:

I wrote the same in global style of site.

The first and second method didn't work for me. I'm using bootstrap2 like I wrote earlier and I can't modify all css rules to add /deep/ element.

Is there any other way to do it?

[Rob Dodson]

Take a look at this StackOverflow thread:
http://stackoverflow.com/questions/24108315/bootstrap-styles-not-applying-within-a-shadow-dom-on-chrome-35

The easiest solution is to include the bootstrap css in your elements, or open up the bootstrap css file and change all of the selectors to contain 'html /deep/' at the beginning

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/443f2e06-6a7f-4ce0-85b4-6ca6c6acefce%40googlegroups.com.