Poylmer Feedback

gistfile1.md

Polymer Feedback

Things I've come accross that are unpleasant with polymer.

Template Binding

1. There is TemplateBinding which is standalone
2. It doesn't seem like a direct implementation of the template tag
3. No instructions for using it standalone (turns out you have to bower install it and its dependencies and include them manually) — I've published a compiled version to npm at templatebinding
4. The event handling doesn't work, turns out you do something different for that called auto-binding, no explanation why this is the case, or why it was left out of template binding

Intuitiveness

In polymer you define custom elements like so:

<!-- scripts dependencies go here -->
<polymer-element name="my-element">
	<template>
		<!-- stylesheet dependencies go here -->
		<!-- element html goes here -->
	</template>
	<script>
		Polymer('my-element', {
			// logic goes here -->
		})
	</script>
</polymer-element>

However, it is completely unclear why this is so. In fact, reading the docs says that there are a few varieties to this. Here's why this is unclear:

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?

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?

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?

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

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.

   <polymer-element name="my-element">
   	<template>
   		<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
   		<script>$(function(){
   			// never reached because $ is undefined
   			alert('dom is ready');
   		})</script>
   	</template>
   	<script>
   		Polymer('my-element', {
   			// logic goes here -->
   		})
   	</script>
   </polymer-element>

Ideal API:

<!-- global scope here -->

<!-- define our element's html -->
<polymer-element name="my-element">
	<!-- everything in here is part of the custom element, so you can have whatever you want in here -->
	<template>
		<!-- if you want auto-binding, use the template element -->
		<div>sup {{name}}</div>  <!-- will output: sup Ben
	</template>
	
	<!-- if you don't want auto-binding, just continue as is -->
	<div>sup {{name}}</div>  <!-- will output as is, as there is no auto-binding -->
	
	<!-- shadow dom stuff is opt-in by using the shadow-dom element -->
	<shadow-dom>
		<!-- custom element specific and isolated jquery inclusion -->
		<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
		<script>$(function(){
			alert('dom is ready');
		})</script>
	</shadow-dom>
</polymer-element>

<!-- define our element's api -->
<script>
	Polymer('my-element', {
		name: 'Ben',
		ready: function(){
			// jquery won't exist here, as it was added to the element's dom
			alert(typeof $) // undefined
			
			// to access it, go inside the shadow dom element
			alert(typeof this.querySelector('shadow-dom').document.$) // object
		}
	})
</script>