Difference in inherited styles between Chrome & other browsers

[stopsatgreen]

Am working on a custom element using Polymer polyfill, here: https://github.com/stopsatgreen/leaflet-map

Displays fine in Firefox & Safari, but in Chrome (stable) the styling is all over the place; looks like no CSS rules are being inherited inside the Shadow DOM. No errors are reported in the console.

[ebidel]

This sounds like an issue on your end with native SD. Styles don't penetrate in. Safari and Firefox look fine because they're using the polyfill. http://stackoverflow.com/questions/24083148/figuring-out-why-custom-element-is-shown-in-safari-and-firefox-but-not-in-chrom/24086000#24086000

[dhubler]

Peter, this is a rather fundamental issue at the heart of web components
and could change quite drastically how you organize your CSS. It did for
us and we're still not sure how we're organizing our CSS but we have a
solution that's working for now. In polymer's defense, this is how it was
documented to work from the beginning and we've only been getting away with
it until chrome 35 came out about a month ago.

I see how in the long run the style encapsulation is a good thing, but in
the short term, it's prompting a lot of challenges. There's no question to
us though that Polymer is worth the extra effort on the CSS changes.

note, some things leak thru such as fonts, so you'll want to consider that
as well.

On Fri, Jun 20, 2014 at 11:44 AM, Eric Bidelman [email protected]
wrote:

This sounds like an issue on your end with native SD. Stills don't
penetrate in. Safari and Firefox look fine because they're using the
polyfill.
http://stackoverflow.com/questions/24083148/figuring-out-why-custom-element-is-shown-in-safari-and-firefox-but-not-in-chrom/24086000#24086000

—
Reply to this email directly or view it on GitHub
#531 (comment).

[ebidel]

For Polymer's site, we chose to have each component include it's own .sass file. That file loads a shared _elements.scss used across all elements. It also loads our common reset sheet, color schemes, etc: https://github.com/Polymer/docs/tree/master/sass/elements. This might be useful to you guys.

some things leak thru such as font

The shadow root still inherits CSS properties that are inheritable.

[JedWatson]

I've been wondering how to address this too; it's currently the biggest issue I'm facing adopting polymer, even for projects with a relatively limited audience where some R&D would be acceptable.

@ebidel doesn't including the common reset sheet / colour schema / etc. create a fair amount of overhead for each element?

[dhubler]

for us, with css generation tools where they are this isn't about how to
reuse css, it's more about changing your css generation scripts and
understanding the performance characteristics.
On Jul 3, 2014 11:16 PM, "Jed Watson" [email protected] wrote:

I've been wondering how to address this too; it's currently the biggest
issue I'm facing adopting polymer, even for projects with a relatively
limited audience where some R&D would be acceptable.

@ebidel https://github.com/ebidel doesn't including the common reset
sheet / colour schema / etc. create a fair amount of overhead for each
element?

—
Reply to this email directly or view it on GitHub
#531 (comment).

[ebidel]

On Sat, Jul 5, 2014 at 8:10 AM, Douglas Hubler [email protected]
wrote:

for us, with css generation tools where they are this isn't about how to
reuse css, it's more about changing your css generation scripts and
understanding the performance characteristics.
On Jul 3, 2014 11:16 PM, "Jed Watson" [email protected] wrote:

I've been wondering how to address this too; it's currently the biggest
issue I'm facing adopting polymer, even for projects with a relatively
limited audience where some R&D would be acceptable.

@ebidel https://github.com/ebidel doesn't including the common reset
sheet / colour schema / etc. create a fair amount of overhead for each
element?

Blink has internal plumbing for stylesheet sharing:
https://groups.google.com/d/msg/polymer-dev/lv8JznvOH4s/Yt9eczaEG14J

—
Reply to this email directly or view it on GitHub
#531 (comment).

—
Reply to this email directly or view it on GitHub
#531 (comment).