search

PolymerThemes / polymer-themes

http://polymerthemes.com/
BSD 3-Clause "New" or "Revised" License
31 stars 4 forks source link

Some paper-buttons can't pierce shadow DOM #3

Closed MichaelXavier closed 9 years ago

MichaelXavier commented 9 years ago

First off, there's a very good chance I'm misunderstanding how the theme is meant to work. I've put together a simple git repo to show this issue.

I noticed that if I include a polymer theme at the top of my root document (as recommended) and add some things like buttons to the root document, they are styled correctly. However, if I have any custom elements that I use in the document, they aren't completely styled.

https://github.com/MichaelXavier/polymer-theme-issue

You should see when you run that demo that the second button on the page (the one inside of a custom element) gets styled with a drop shadow and different font but does not get the color change even though its marked as primary. I've also tried a few permutations of importing the theme directly inside the element definition and have had no success so far.

PolymerThemes commented 9 years ago

Hello MichaelXavier!

Thank you for your message, and sorry for the delayed response.

You are absolutely correct in your findings: the styles do not cross into custom elements. This is actually by design and documented at the Polymer Project documentation page for styling.

In part, this issue is addressed by the use of custom properties that some of the elements expose, such as --paper-toolbar-color. However, there are not enough custom properties to satisfy our needs for providing sufficient theming.

One option was for us to use /deep/ to pierce through DOM boundaries, and in fact, this was the approach used in pre-1.0 versions of Polymer Themes. Since Polymer 1.0, this technique is no longer recommended, and therefore we made the decision to not ship our themes with /deep/ by default, and to use as much of the custom properties as we could.

Of course, you are free to modify the theme file on your end to add /deep/ where appropriate. Alternatively, you may of course add CSS to your custom element directly.

We apologise if the current solution is not appealing, and we agree! We are actively looking for a better solution, so please look out for future updates in this area.

MichaelXavier commented 9 years ago

Hi, Thanks for getting back to me. My current solution is to move shared styles into a CSS and link it into each of my internal elements. I think the CSS isolation makes sense for libraries and third party elements but within my own app I don't want the CSS scoping to dictate how I break up my elements.