Documenting how content nodes (don't) appear in Shadow DOM polyfill

[Jan Miksovsky]

I came across an issue today in some styling that worked under native Shadow DOM, but didn't work under the polyfill.

A repro case (http://jsbin.com/sukek/4/edit) shows that it's possible to style a <content> node in native Shadow DOM, because the content node actually exists in the DOM. The polyfill doesn't actually put a node in the DOM to represent a <content> node. So one can't reference it in CSS selectors, refer to it with this.$.id, etc.

One can work around these problems, but I didn't see any of this <content> node polyfilling details captured in the useful Polyfill Details section. It'd be helpful to add a bit about how distribution works in the polyfill, and mention that <content> nodes won't actually end up in the DOM.

[Scott Miles]

>> because the content node actually exists in the DOM

It's not quite this simple. The DOM you see in the inspector under polyfill represents the render tree. Content nodes are removed from the render tree in all cases.

In the normal queryable DOM (i.e. if you access DOM via JavaScript) you should see the content nodes there just fine. This should mirror the behavior of the native Shadow DOM. (The converse is that your distributed nodes will be sitting there inside their final projection target when looking at the DOM through inspector under polyfill, but only appear in their starting point in light-dom under native).

I believe the actual issue here is with polyfilling the CSS engine, which is a bit more subtle.

In any case, it's true this is worthy of documentation.

S

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/d9e10190-f3bd-4aea-ba70-cadad61246f9%40googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Daniel Freedman]

The platform library provides a CSS preprocessor for ShadowDOM Polyfill. Some of the abilities are documented here: http://www.polymer-project.org/docs/polymer/styling.html#polyfill-styling-directives.

Most important is that since the <content> node does not get represented in the composed tree, we rely on the author to provide an annotation for the ::content rules.

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

[Jan Miksovsky]

Scott/Daniel: Thanks for the information. I'll leave it to those working on the documentation to consider how to document this particular point.