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 On Tue, Dec 30, 2014 at 3:32 AM, <[email protected]> wrote: > 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: > > > <https://lh5.googleusercontent.com/-_vzMcCyn4WY/VKKM-all2hI/AAAAAAAAAkI/WofBj33_KRE/s1600/Bild%2B66.png> > As I see it, it says that Polyfill for Firefix handles, or imitates, the > ShadowDOM, so shouldnt it work with the encapsulation, as expected? > > > > On Monday, December 29, 2014 11:47:15 PM UTC+1, Rob Dodson wrote: >> >> 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. >> >> On Mon, Dec 29, 2014 at 11:27 AM, <[email protected]> wrote: >> >>> Sorry, but I feel I need to bump this. >>> >>> Its a serious issue, if its true, but I am hoping its not? >>> >>> >>> On Tuesday, December 16, 2014 12:21:17 AM UTC+1, [email protected] >>> wrote: >>>> >>>> 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-chrom >>>> e-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? >>>> >>> 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 [email protected]. >>> To view this discussion on the web visit https://groups.google.com/d/ >>> msgid/polymer-dev/e3e69f44-9611-4513-bdb9-616edc0c9afa% >>> 40googlegroups.com >>> <https://groups.google.com/d/msgid/polymer-dev/e3e69f44-9611-4513-bdb9-616edc0c9afa%40googlegroups.com?utm_medium=email&utm_source=footer> >>> . >>> >>> For more options, visit https://groups.google.com/d/optout. >>> >> >> 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 [email protected]. > To view this discussion on the web visit > https://groups.google.com/d/msgid/polymer-dev/c36c742b-baac-4e7e-93bc-b0919da8c811%40googlegroups.com > <https://groups.google.com/d/msgid/polymer-dev/c36c742b-baac-4e7e-93bc-b0919da8c811%40googlegroups.com?utm_medium=email&utm_source=footer> > . > > For more options, visit https://groups.google.com/d/optout. > 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 [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CACGqRCB0EwZ-9CYBfPz8pzOJ1CURUtRd3vmZs6DVY08CvC31uw%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
