DOM Templating


Elements in PolymerJS use a subtree of DOM elements to execute their features. DOM templating provides an easy way to create a DOM subtree for your element.In Polymer.js, if we add a DOM template for the element that will result in a shadow root being created for the element and then a copy of the template into the shadow tree.

Important elements that are associated with DOM templating are:
1. dom-repeat
2. dom-if
3. array-selector
4. custom-style

Specify a DOM template

There are three basic ways to specify a DOM template:-
1. Use the < dom-module > element
2. Define a template property on the constructor
3. Inherit a template from another Polymer element

There are several steps to specify an element's DOM template using a < dom-module >
1. Firstly we have to create a < dom-module > element with the id attribute that matches the name of the element.
2. Now we have to create a < template > element inside the < dom-module >.
3. Finally give the element that is a static is getter that matches the name of the element. The polymer uses this to retrieve the < dom-module > for the element.


dom-repeat element

This is the custom HTMLTemplateElement type extension that automatically binds one instance of the template content to each object.

1. The dom-repeat contains an item property that holds an array as a value.
2. One instance of the template is a bind for each item in the DOM


\\Syntax

< template is="dom-repeat" items="{{array-Name}}" >< template >

-----------------------------------------------------------------

\\Example
 
< template is="dom-repeat" items="{{lfc}}">
          < li >< img src="[[lfc.img]]"/>< h2 >[[lfc.name]] < br >< i >Email:[[lfc.email]] 
      







Visit :


Discussion


* You must be logged in to add comment.