Polymer 1.0 and WebComponents.js

[nazar-pc]

I've being using Polymer for almost a year now and want to migrate to 1.0, so, there are couple of questions regarding use of WebComponents.js polyfills.

Distinction of native support from WebComponents.js polyfill

While maintaining Shady DOM, do you make any distinction whether real native support is available or polyfill is used?

Polymer.dom use

If WebComponents.js polyfill is present, is it possible to ignore Light DOM/Shady DOM and interact directly. I really like to be closer to native interfaces and thus additional Polymer.dom seems a bit overkill on top of everything, even though it brings performance boost (I know some of polyfill's limitations and can deal with that)

Styling

Is it possible to use ::content .special directly instead of ugly .content-wrapper > ::content .special if polyfill is used?

[namiwang]

About the first shady-dom vs native shadow-dom problem, this is what you wanna do:

  <script src="components/webcomponentsjs/webcomponents-lite.js"></script>
  <script>
    window.Polymer = window.Polymer || {};
    window.Polymer.dom = 'shadow';
  </script>

ref: https://www.polymer-project.org/1.0/docs/devguide/settings.html

[nazar-pc]

@NanoWang, first question was not about Shady DOM vs Shadow DOM, it was about native Shadow DOM vs Shadow DOM polyfill (WebComponents.js).
I'm curious whether Polymer with window.Polymer.dom = 'shadow'; make a distinction between native support or used polyfill.

[namiwang]

@nazar-pc
Well, things are a little complicated, let me try to make it clear.

shadow-dom polyfill is included in webcomponents, and the new version of Polymer comes with a thing called shady-dom.

So there comes the webcomponents-lite, which is webcomponents minus the shadow-dom polyfill.

In your case, I guess you should include the webcomponents-lite and set window.Polymer.dom to shadow instead of shady.

[nazar-pc]

@NanoWang you still don't understand my question at all, read it once again. I'm not asking what is included where, it seems I know that better than you. Also I'm not asking what I should include, instead I'm asking what if I will include?

[sorvell]

While maintaining Shady DOM, do you make any distinction whether real native support is available or polyfill is used?

I'm not sure I fully understand the question, but I think the answer may be no. When Shady DOM is in use, Shadow DOM native or polyfilled is not used. Users can opt-in to using Shadow DOM. When Shadow DOM is requested, it is used if support is detected either via the platform or the polyfill. To be clear, this means you can always use Shadow DOM if you turn it on via the link above and load the full webcomponents.js polyfill.

If WebComponents.js polyfill is present, is it possible to ignore Light DOM/Shady DOM and interact directly.

Yes, but please do so with caution. If you do not use Polymer.dom, your elements may be incompatible with elements that use Shady DOM. If you are ok with requiring use of Shadow DOM native or polyfill then this should work fine.

Is it possible to use ::content .special directly instead of ugly .content-wrapper > ::content .special if polyfill is used?

Not at this time, but we'll investigate doing so in the future. Please feel free to file a separate issue on this. Thanks.

[nazar-pc]

Thanks, @sorvell!