Yeah it helps to think about Shadow DOM as two concepts: *DOM encapsulation*,
and s*tyle 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.
On Tue, Dec 30, 2014 at 7:17 AM, Eric Bidelman <[email protected]> wrote:
> 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
> <https://groups.google.com/d/msgid/polymer-dev/CACGqRCB0EwZ-9CYBfPz8pzOJ1CURUtRd3vmZs6DVY08CvC31uw%40mail.gmail.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/CAJj5OwDzns4iJgYNdBvn0RVNXwrqp9%3D1MeP%2BNB91VfLk6L5eGw%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
