Polymer Feedback

[Benjamin Lupton]

I did up this gist today with some feedback, or rather questions about Polymer:

https://gist.github.com/balupton/47fb659790b178f566ff

I've been using Polymer on and off for most of the year now, but I'm still struggling to understand how exactly it operates, why certain things are the way they are, and how I can actually workaround it's nuances that the shadow dom creates.

I really find Polymer quite amazing, it's focus on HTML means that the app you prototype is your production app, this is amazing and something javascript-only-libraries can't compete with. I'd love to continue to use it.

[Scott Miles]

Here are some replies: 

https://gist.github.com/sjmiles/2f5706afbf34578d20fb

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/2065dd22-d286-4fea-a8b0-760c70764e36%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[cletusw]

I haven't tried to use TemplateBinding standalone, so I can't really address your first set of issues, but with regard to Intuitiveness:

 

1. Where does the shadow dom start? Is that what the template element does? Is template synomonous with shadow dom?

2. What is the template element for? Can I have multiple template elements at that level?

Yes, when your element is instantiated, Polymer stamps out the contents of the first <template> tag inside your <polymer-element> into the Shadow DOM. That's stated here. This means that re #2, you can place as many template tags as you want inside your <polymer-element>, but Polymer will only stamp out the first one for you. You could very well add additional template tags with IDs and stamp them out manually from your lifecycle callback code.

 

3. How does it know which script tag is the polymer element definition script tag? Does it care? Why is that script tag inside the polymer element? Is it in the shadow dom? or the global scope? It appears the global scope? In which case, why is it inside the <polymer-element> element?

It doesn't know. That script tag is just a plain ol' script tag (in the global scope, like you noticed). It's usually placed inside the <polymer-element> for convenience, but it could very well be outside or even in a separate file. Polymer just waits until it's seen a <polymer-element name="my-name"> tag and a Polymer('my-name', {}) call from anywhere then defines a new element using the contents of both.

 

4. What if I don't want to use shadow dom for my custom element? But I still want the model change listeners, the auto binding, etc?

There used to be a lightdom attribute for this, but it was removed, probably for reasons stated here. You could probably find a way to use Polymer's auto-binding template inside your custom element. If not, you can still create your own custom elements without Polymer and directly use the observe-js polyfill and TemplateBinding library to get what you want (although you did mention that TemplateBinding doesn't seem to be the easiest thing to use as a standalone library).

 

5. The this.$.elementID helper doesn't seem to find dynamicly created elements (e.g. an element created from the results of an ajax request), it should just be removed imho

This is probably the case first and foremost for performance reasons, but it also makes sense in terms of Polymer's vision. Instead of adding an element to your Shadow DOM imperatively (using JavaScript), Polymer gives your markup superpowers so it can represent the full set of states of your element. In the rare case that you still need access to dynamically generated elements, you can still use vanilla javascript: this.$.myStaticNode.querySelector('.dynamicallyGeneratedContent').

 

6. How come when I include jQuery inside the template, then I create another script to use jQuery, it can't find jQuery? Nor can I access it via this.jQuery or any other way I could think of, E.g.

Not sure exactly what's going on here, but it looks like <script> tags inside <polymer-element> templates are loaded asynchronously ($ is available when the page finishes loading, just not when your <script> tag runs), but the standard practice is for a <polymer-element> to specify its external dependencies outside its element definition, which makes your code work fine. (You could even create an HTML Import for your external dependency and Polymer would automatically dedupe that resource, preventing it from being loaded multiple times by different components)

[Eric Bidelman]

On Wed, Jul 30, 2014 at 10:12 AM, cletusw <cle...@gmail.com> wrote:

I haven't tried to use TemplateBinding standalone, so I can't really address your first set of issues, but with regard to Intuitiveness:

 

1. Where does the shadow dom start? Is that what the template element does? Is template synomonous with shadow dom?

2. What is the template element for? Can I have multiple template elements at that level?

Yes, when your element is instantiated, Polymer stamps out the contents of the first <template> tag inside your <polymer-element> into the Shadow DOM. That's stated here. This means that re #2, you can place as many template tags as you want inside your <polymer-element>, but Polymer will only stamp out the first one for you. You could very well add additional template tags with IDs and stamp them out manually from your lifecycle callback code.

 

3. How does it know which script tag is the polymer element definition script tag? Does it care? Why is that script tag inside the polymer element? Is it in the shadow dom? or the global scope? It appears the global scope? In which case, why is it inside the <polymer-element> element?

It doesn't know. That script tag is just a plain ol' script tag (in the global scope, like you noticed). It's usually placed inside the <polymer-element> for convenience, but it could very well be outside or even in a separate file. Polymer just waits until it's seen a <polymer-element name="my-name"> tag and a Polymer('my-name', {}) call from anywhere then defines a new element using the contents of both.

 

4. What if I don't want to use shadow dom for my custom element? But I still want the model change listeners, the auto binding, etc?

There used to be a lightdom attribute for this, but it was removed, probably for reasons stated here. You could probably find a way to use Polymer's auto-binding template inside your custom element. If not, you can still create your own custom elements without Polymer and directly use the observe-js polyfill and TemplateBinding library to get what you want (although you did mention that TemplateBinding doesn't seem to be the easiest thing to use as a standalone library).

 

5. The this.$.elementID helper doesn't seem to find dynamicly created elements (e.g. an element created from the results of an ajax request), it should just be removed imho

This is probably the case first and foremost for performance reasons, but it also makes sense in terms of Polymer's vision. Instead of adding an element to your Shadow DOM imperatively (using JavaScript), Polymer gives your markup superpowers so it can represent the full set of states of your element. In the rare case that you still need access to dynamically generated elements, you can still use vanilla javascript: this.$.myStaticNode.querySelector('.dynamicallyGeneratedContent').

There's a feature request tracking this: 

https://github.com/Polymer/TemplateBinding/issues/177

 

 

6. How come when I include jQuery inside the template, then I create another script to use jQuery, it can't find jQuery? Nor can I access it via this.jQuery or any other way I could think of, E.g.

Not sure exactly what's going on here, but it looks like <script> tags inside <polymer-element> templates are loaded asynchronously ($ is available when the page finishes loading, just not when your <script> tag runs), but the standard practice is for a <polymer-element> to specify its external dependencies outside its element definition, which makes your code work fine. (You could even create an HTML Import for your external dependency and Polymer would automatically dedupe that resource, preventing it from being loaded multiple times by different components)

Em terça-feira, 29 de julho de 2014 22h56min46s UTC-6, Benjamin Lupton escreveu:

I did up this gist today with some feedback, or rather questions about Polymer:

https://gist.github.com/balupton/47fb659790b178f566ff

I've been using Polymer on and off for most of the year now, but I'm still struggling to understand how exactly it operates, why certain things are the way they are, and how I can actually workaround it's nuances that the shadow dom creates.

I really find Polymer quite amazing, it's focus on HTML means that the app you prototype is your production app, this is amazing and something javascript-only-libraries can't compete with. I'd love to continue to use it.

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/4ee07c92-f525-4e54-a521-d2870c702c00%40googlegroups.com.