Firefox (desktop) and Chrome (iOS) not working, ShadowDOM fails?

[ted.e...@gmail.com]

Hey,

I have posted two questions on Stackoverflow. Both of them points out that I cannot get Polyfill to work for my specific web site in Firefox or in Chrome on iOS, and I cannot figure out why. The Topeka app works fine in Firefox, but my site does not.

Any tips or advice from the Polymer team would be greatly appreciated.

Polymer: Layout screwed up in Firefox, fine in Chrome

http://stackoverflow.com/questions/27480345/polymer-layout-screwed-up-in-firefox-fine-in-chrome

Polymer in Chrome for iOS - it is not working, right?

http://stackoverflow.com/questions/27482513/polymer-in-chrome-for-ios-it-is-not-working-right

Also, I uploaded the stuff here:

http://misc.snapcode.se/polymer

Can anyone see what I am doing wrong here?

[ted.e...@gmail.com]

Sorry, but I feel I need to bump this.

Its a serious issue, if its true, but I am hoping its not?

[Rob Dodson]

In a browser like Chrome, the markup inside an element's shadow root is not visible to the rest of the page. But in browsers like Firefox and Safari, this is not the case. So all of the divs and other bits of markup inside a polymer element are going to be in the main document when you view your site on Firefox or Safari. This means if you write a very loose style selector like:

div {
  background: red;
}

It will turn every div (even those inside Polymer elements) red, if you're in a browser like Firefox or Safari. The Shadow DOM polyfill cannot create true style scoping in browsers which lack support (like Firefox, for instance). If you are creating a Polymer element, named x-foo, and you put styles inside of that element, the polyfill will try to help you out by prefixing those styles with your element name.

For example:

// in x-foo.html

:host div {
  background: red;
}

becomes:

x-foo div {
  background: red;
}

This is useful, but it's not bulletproof, and it means you have to be careful how you write the rest of the styles on your page so you don't accidentally override the styles inside of the elements.

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/e3e69f44-9611-4513-bdb9-616edc0c9afa%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[ted.e...@gmail.com]

Thanks for that update Rob!

However, I am a bit puzzled. If I go to https://www.polymer-project.org/resources/compatibility.html, I see this:

As I see it, it says that Polyfill for Firefix handles, or imitates, the ShadowDOM, so shouldnt it work with the encapsulation, as expected?

[Eric Bidelman]

The Shadow DOM polyfill covers just about every case you'll run in to. DOM scoping is one of

Shadow DOM's big features that the polyfill does a great job at imitating. 

The other feature of SD is styling. The polyfill's styling features are tricky to polyfill. We actually call

the CSS scoping stuff a "shimmer" because it requires more work from the developer to get things right.

However, using the polyfill-* rules and targeting selectors carefully, you can get back to near 100% of

what native SD gives you.

This guide should be very helpful:

https://www.polymer-project.org/docs/polymer/styling.html#polyfill-details

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/c36c742b-baac-4e7e-93bc-b0919da8c811%40googlegroups.com.

[Rob Dodson]

Yeah it helps to think about Shadow DOM as two concepts: DOM encapsulation, and style scoping.

DOM encapsulation:

Imagine you have an element like this:

x-foo

  #shadow-root

    h1

If the JavaScript on the page then says: `document.querySelector('h1')` it should not be able to select the `h1` inside of `x-foo`. That's private stuff that's hidden by x-foo's shadow-root. It's encapsulated. The polyfills make this work in all browsers (Firefox and Safari included).

style scoping

We'll use the same x-foo example from before:

x-foo

  #shadow-root

    h1

If you write a style like this in the parent document:

h1 {

  color: red;

}

In browsers that support Shadow DOM, the h1 inside of x-foo will not be red. That's because the styles for that h1 are scoped to x-foo. However, it's pretty much impossible to polyfill CSS behavior, so the polyfill cannot guarantee perfect scoping in browsers like Safari and Firefox.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CACGqRCB0EwZ-9CYBfPz8pzOJ1CURUtRd3vmZs6DVY08CvC31uw%40mail.gmail.com.