I have a projet setup similar to the Polymer shop-app. To reduce thr code base in the app itself, I splitted the hole main page layout into an separete element project. The project has an element Layout which loads 7 of its Dependencys lazy:
_pageLoaded: function (shouldResetLayout) {
this._ensureLazyLoaded();
...
}
_ensureLazyLoaded: function () {
if (!this.loadComplete) {
Polymer.RenderStatus.afterNextRender(this, function () {
this.importHref(this.resolveUrl('lazy-resources.html'), function () {
this.loadComplete = true;
}, null, true);
});
}
},
Basically the same logic as the Shop-app exmaple._pageLoaded is an observer of the two-way data bound page property of my Shop-app.
In my Shop-app itself, I include the layout element like so:
<link rel="import" href="../bower_components/lc-app-layout/lc-app-layout.html">
<lc-app-layout categories="[[categories]]" page="[[page]]" category-name="{{categoryName}}">
<iron-pages role="main" selected="[[page]]" attr-for-selected="name" selected-attribute="visible">
<!-- home view -->
<shop-home name="home" categories="[[categories]]"></shop-home>
<!-- list view of items in a category -->
<shop-list name="list" route="[[subroute]]" offline="[[offline]]" query-Params="[[queryParams]]"></shop-list>
<!-- detail view of one item -->
<shop-detail name="detail" route="[[subroute]]" offline="[[offline]]"></shop-detail>
</iron-pages>
</lc-app-layout>
And also have some lazy ressources in the app itself, which are loaded the same way as in the layout.
Now when I want to build everythin, I need to add the lazy-resurces of the layout element as an fragment to the Polymer.json so that the analyser will find the it's dependencys:
"fragments": [
"src/view/list/shop-list.html",
"src/view/detail/shop-detail.html",
"src/lazy-resources.html",
"bower_components/lc-app-layout/lazy-resources.html"
No when I serve this build, the page doesn't load most of the times. It shows error like:
Cannot read property '_makeReady' of undefined
Polymer is not a function
Cannot read property 'isDescendant' of undefined
When I throttle the network speed, chances are higher that everythin will load up. So I assume there is some timing issue in the asynchronous ImportHref or something like that. Or am I just missusing the fragments to tell the analyzer to scan my laczy resources of the layout element?
I'm using Polymer-CLI 0.18.0. Runnig the app with polymer serve does work as intended.
Solved the problem by moving the lazy loading from layout element to the lazy-ressource of the Shop-app.
Related
We have this AngularJS SP application (smart-mirror) in electron browser, which has user createable extensions.
the extensions are small snippets of html that use angular directives
and use controllers and services.
to install an extension, one has to edit the main page and insert the script tags for the controller and service functions and a <div ng-include= ...> for the snippet of HTML
hardcoded this single page app works great.
but I want to add the capability to this app (opensource) to dynamically load those elements somehow...
adding the tags to the dom works, BUT are not processed correctly.
the HTML is processed before the scripts (from the inserted tags) are run, and when the ng-include inserts the HTML snippet, then controllers are not defined yet...
the body (with the extensions in hard-coded positions commented out)
<body ng-controller="MirrorCtrl" ng-cloak>
<div class="top">
<div class="top-left">
<!-- <div ng-include="'plugins/datetime/index.html'"></div>
<div ng-include="'plugins/calendar/index.html'"></div> -->
</div>
<div class="top-right">
<!-- <div ng-include="'plugins/weather/index.html'"></div>
<div ng-include="'plugins/traffic/index.html'"></div>
<div ng-include="'plugins/stock/index.html'"></div>
<div ng-include="'plugins/tvshows/index.html'"></div>
<div ng-include="'plugins/ha-display/index.html'"></div> -->
</div>
</div>
...
...
<script src="filename.service"/>
<script src= filename.controller"/>
</body>
the calendar extension html (inserted into specific div area of the page)
<ul ng-controller="Calendar" class="calendar fade" ng-show="focus == 'default'" ng-class="config.calendar.showCalendarNames ? 'show-calendar-names' : ''">
<li class="event" ng-repeat="event in calendar" ng-class="(calendar[$index - 1].label != event.label) ? 'day-marker' : ''">
<div class="event-details">
<span class="day">
<span ng-bind="event.startName"></span>
<span ng-if="event.startName != event.endName"> - <span ng-bind="event.endName"></span></span>
</span>
<div class="details calendar-name" ng-bind="event.calendarName"></div>
<span class="summary" ng-bind="event.SUMMARY"></span>
<div class="details" ng-if="event.start.format('LT') != event.end.format('LT')">
<span ng-if="event.startName != event.endName"><span ng-bind="event.start.format('M/D')"></span> <span ng-bind="event.start.format('LT')"></span> - <span ng-bind="event.end.format('M/D')"></span> <span ng-bind="event.end.format('LT')"></span></span>
<span ng-if="event.startName == event.endName"><span ng-bind="event.start.format('LT')"></span> - <span ng-bind="event.end.format('LT')"></span></span>
</div>
<div class="details" ng-if="event.start.format('LT') == event.end.format('LT')">All day</div>
</div>
</li>
</ul>
the calendar extension controller (used by the html)
function Calendar($scope, $http, $interval, CalendarService) {
var getCalendar = function(){
CalendarService.getCalendarEvents().then(function () {
$scope.calendar = CalendarService.getFutureEvents();
}, function (error) {
console.log(error);
});
}
getCalendar();
$interval(getCalendar, config.calendar.refreshInterval * 60000 || 1800000)
}
console.log("registering calendar controller")
angular.module('SmartMirror')
.controller('Calendar', Calendar);
the calendar extension service (used by the controller, shortened for this discussion)
(function () {
'use strict';
function CalendarService($window, $http, $q) {
...
...
return service;
}
console.log("registering calendar service")
angular.module('SmartMirror')
.factory('CalendarService', CalendarService);
} ());
so a user wanting to add an extension would have to create these files,
and edit the main page HTML and insert them
<div ng-include src="filename.html"></div>
in the right place and then add the
<script src="filename.service" >
and
<script src="filename.controller">
in the right place and order, service needs to be done before the controller,
as controller uses service.
anyhow, it's easy to add code to locate all the extensions and dynamically insert elements into the dom in their respective places... but...
in the hard coded, the scripts are added after the html in the body
so, I added a new script (processed when the page is loaded), which locates and inserts all the elements to support the extensions in the right places..
and then the script ends.... (last one in the hard-coded HTML) and the HTML directives are processed and boom, the dynamically added scripts have not been loaded or processed, so the controllers are not found...
I CAN create a temp HTML file with all this info in it and load THAT instead of dealing with the dynamic loading, but I think its better to resolve this
I have tried creating my own angular directive and compiling that in, but get stuck in a loop
<divinc src="filename.service"></divinc>
the inserted div is correct, as a child of the divinc directive
angular.module('SmartMirror')
.directive("divincl", ["$compile" ,function($compile){
return {
priority: 100,
terminal: true,
compile: function(scope, element, attrs) {
var html = "<div ng-include=\"" + element['incl']+ "\" onload='function(){console.log(\'html loaded\')}'></div>"
var templateGoesHere = angular.element(document.getElementById(element['id']));
templateGoesHere.html(html);
//document.body.innerHTML='';
var v= $compile(templateGoesHere);
//scope.$apply();
return function linkFn(scope) {
v(scope) // Link compiled element to scope
}
}
}
}]);
advice on how to solve this problem.. Thanks
In order to make an angularjs 1.7 application load dynamically extensions, there are 2 ways:
either use "nested angularjs applications", which is clearly an advanced use of angularjs and will require you to communicate between 2 angularjs applications, to use $scope.$apply to tell the other app to update etc..
either don't load them dynamically in the frontend, but in your backend when generating the html page which contains the application. Try to list all the extensions from the start.
I recommend you to forget the use of ng-include too, and the fact of trying to add <script></script> inside a directive of your application.
First, you need to re-understand how an angularjs application is started.
When you load your main application, you have a script in which angular.module, angular.directive, angular.value, angular.config, angular.run ... calls are made. This is the declaration step
If you declare a module MyApp and that in your html you have a DOM element with ng-app="MyApp", angularjs will automatically run angular.bootstrap() on this DOM element in order to start MyApp. The execution of the application starts here. You cannot declare anything anymore in the module MyApp.
Secondly, I think that <script></script> code inside templates is sanitized and removed by angular. Plus, even if you execute the code, since the declaration step has finished, you are not supposed to create new directives or register new services, it won't work.
A good way is that when you load your plugin, you:
Load the script of the plugin from the start, it must declare a new module like MyPlugin1.
In the directive which will contain the plugin, put the code of the link I sent you, which makes possible to insert a sub-application. In the end you will have a <div ng-app="MyPlugin1"></div> inside your directive's template
Then call angular.bootstrap on that node, which will make possible to start the sub application.
If you do this, you can run the sub application, but you didn't pass it parameters. In order to pass it parameters, you can put the code of the module MyPlugin1 inside a function, in order to have an application factory. Then use app.value('param1', parameter1) to initialize the app.
For example:
function declarePlugin1(myParam1, myParam2) {
var app = angular.module('MyPlugin1', []);
// app.directive();
app.value('myParam1', myParam1);
app.value('myParam2', myParam2);
}
And inside the directive call declarePlugin1("test", 42);, which will declare the application MyPlugin1 with the initialized values, and then angular.bootstrap to tell angularjs to start this application.
You can pass callbacks too, in order to communicate between the 2 applications.
I am attempting to build generic web components that render JSON object collections, like a tree view and a multi-list view (moving items between two lists). I would like to copy the pattern used by iron-list where a template containing the individual item presentation is passed into the component for reuse.
For example, given this web component template:
<dom-module id="intworkspace-tree">
<template>
<style include="iron-flex iron-flex-alignment">
paper-icon-item {
--paper-item-min-height: var(--intworkspace-tree-margin,30px);
--paper-item-icon-width : var(--intworkspace-tree-margin,30px);
}
paper-icon-item:focus::before,
paper-icon-item:focus::after {
color: inherit;
opacity: 0;
}
.node {
margin-left: var(--intworkspace-tree-margin,30px);;
}
</style>
<slot id="labelView"></slot>
<template id="nodeView">
<div class="layout vertical">
<paper-icon-item on-tap="nodeSelected">
<iron-icon icon="expand-less" slot="item-icon" hidden$="[[!hasNodes(node)]]"></iron-icon>
<!-- label goes here-->
</paper-icon-item>
<iron-collapse class="node" opened hidden$="[[!hasNodes(node)]]">
<intworkspace-tree tree="[[node.nodes]]" embedded></intworkspace-tree>
</iron-collapse>
</div>
</template>
</template>
...
</dom-module>
and this usage:
<intworkspace-tree tree="{{testTree}}">
<template><paper-item-body>[[node.name]]</paper-item-body> </template>
</intworkspace-tree>
I would like to render the JSON tree array in a hierachy that combines the web component's template along with template provided through the slot to render the opaque JSON objects. So far I have identified two methods of combining the templates:
Utilize the Polymer.Templatize.templatize API to load the templates, create/stamp new instances, and use the DOM API to append them together and add them to the web component's shadow DOM.
Access the templates contents, combine them together, create and import a new template, and then clone it as needed.
After much adversity I was able to successfully implement #1 but not #2 and that is motivation for my question. #2 is more appealing to me because it is easier for me to merge templates once rather than merging their resulting stamped instances and this approach seems to be the only way I can reuse nested templates like dom-repeat.
My main obstacle is that once Polymer or perhaps it's polyfill is loaded the templates become opaque and can only be utilized by Polymer templatize functionality. For instance, this code works fine without any Polymer imports:
<template>
<div>Template Contents</div>
</template>
<div>
Template Test
</div>
<script>
let template = document.querySelector("template");
let clone = document.importNode(template.content,true);
document.querySelector("div").appendChild(clone);
</script>
Outside of Polymer the template.content DOMFragment has children and innerHTML is set. However once Polymer is used the template.content has no children and the innerHTML is empty. This prevents me from using the DOM API to create a new template that blends the available templates together, i.e.
let newTemplate = document.createElement("template");
newTemplate.content = ... // combine #labelView > template.content with #nodeView.content
let nodeView = document.importNode(newTemplate.content,true);
nodeView.tree=...
Perhaps by design importing templates using the standard HTML mechanism didn't work for me. Is there another way to dynamically create/merge templates at runtime with Polymer? Again my main motivation is that I would like to re-use the dom-if and dom-repeat web components nested in a template without reimplementing all of their functionality.
After additional research I discovered three features of Polymer 2.0 that enabled me to produce a satisfactory solution:
Whenever Polymer processes DOM templates it memoizes them by default. This template caching prevents expense cloning operations and simplifies template binding. The Polymer 2.0 DOM templating documentation explains that the preserve-content attribute can be added to a template to bypass the optimization allowing the template to be manipulated using native DOM operations.
The DOM templating documentation also describes multiple methods of obtaining a custom element's raw template. One option is to call the element's static template() method and another option is to use the Polymer.DomModule.import() function. This second method was of interest to me since it allows one to manage multiple templates beyond the default module template.
The Polymer.TemplateStamp API class has an internal _stampTemplate() function that is used to stamp a template into the custom element's DOM. I would have preferred to have used the well documented Polymer.Templatize.templatize() function but it looks for properties and methods on the template itself which in my case was not a custom element with behaviors defined on it.
Putting these three features together I was able to prepare a dynamic reusable merged template utlizing nested dom-ifs and a dom-repeats as I desired.
Here is the functional result:
Component:
<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../iron-collapse/iron-collapse.html">
<link rel="import" href="../paper-item/paper-icon-item.html">
<link rel="import" href="../paper-item/paper-item-body.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<dom-module id="intworkspace-tree">
<template>
<!-- style includes don't work in stamped template, only in the shadowRoot -->
<style include="iron-flex iron-flex-alignment">
paper-icon-item {
--paper-item-min-height: var(--intworkspace-tree-margin,30px);
--paper-item-icon-width : var(--intworkspace-tree-margin,30px);
}
paper-icon-item:focus::before,
paper-icon-item:focus::after {
color: inherit;
opacity: 0;
}
.node {
margin-left: var(--intworkspace-tree-margin,30px);;
}
</style>
<slot id="labelView"></slot>
</template>
<template id="nodeView">
<template is="dom-repeat" items="{{tree}}" as="node" index-as="n">
<div class="layout vertical">
<!--<div>index: [[n]]</div>
<div>name: [[node.name]]</div>-->
<paper-icon-item on-tap="nodeSelected">
<template is="dom-if" if="[[hasNodes(node)]]">
<iron-icon icon="expand-more" slot="item-icon" hidden$="[[!hasNodes(node)]]"></iron-icon>
</template>
<!-- label goes here-->
</paper-icon-item>
<template is="dom-if" if="[[hasNodes(node)]]">
<iron-collapse class="node" opened>
<intworkspace-tree tree="[[node.nodes]]" node-template="[[nodeTemplate]]" embedded></intworkspace-tree>
</iron-collapse>
</template>
</div>
</template>
</template>
<script>
class IntTree extends Polymer.TemplateStamp(Polymer.Element) {
static get is() {
return 'intworkspace-tree';
}
static get properties() {
return {
tree: {
type: Array,
value: []
},
nodeTemplate: {
type: Object,
}
};
}
ready() {
super.ready();
if (!this.hasAttribute("embedded")) {
let labelTemplate = this.$.labelView.assignedNodes().find((e) => {
return e instanceof HTMLTemplateElement;
});
let nodeTemplate = document.importNode(Polymer.DomModule.import(IntTree.is, "#nodeView"), true);
let repeatTemplate = nodeTemplate.content.querySelector("template[is='dom-repeat']");
let iconItem = repeatTemplate.content.querySelector('paper-icon-item');
iconItem.appendChild(labelTemplate.content);
this.nodeTemplate = nodeTemplate;
}
let nodeInstance = this._stampTemplate(this.nodeTemplate);
this.shadowRoot.appendChild(nodeInstance);
}
hasNodes(node) {
return node.nodes != null && node.nodes.length > 0;
}
nodeSelected(e) {
let collapse = e.currentTarget.parentNode.querySelector("iron-collapse");
let nodeIcon = e.currentTarget.parentNode.querySelector("iron-icon");
if (collapse && nodeIcon) {
collapse.toggle();
if (collapse.opened) {
nodeIcon.icon = "expand-more";
} else {
nodeIcon.icon = "expand-less";
}
}
}
}
window.customElements.define(IntTree.is, IntTree);
</script>
</dom-module>
Usage:
<intworkspace-tree tree="{{testTree}}">
<template preserve-content><paper-item-body>[[node.name]]</paper-item-body></template>
</intworkspace-tree>
I add an observation to Aaron's solution here because I don't have enough reputation to add a comment.
Note this line has a double import
let nodeTemplate = document.importNode(Polymer.DomModule.import(IntTree.is, "#nodeView"), true);
this is not necessary. In chrome and safari works for some reason, but not in FF.
So working with Polymer, just using DomModule import is enough
let nodeTemplate = Polymer.DomModule.import(IntTree.is, '#nodeView');
Hope this helps somebody
I am exploring Polymer with the Shop Application (https://github.com/Polymer/shop)
In the Shop-App.html following iron-pages are defined.
<iron-pages role="main" selected="[[page]]" attr-for-selected="name" selected-attribute="visible" fallback-selection="404">
<!-- home view -->
<shop-home name="home" categories="[[categories]]"></shop-home>
<!-- list view of items in a category -->
<shop-list name="list" route="[[subroute]]" offline="[[offline]]"></shop-list>
<!-- detail view of one item -->
<shop-detail name="detail" route="[[subroute]]" offline="[[offline]]"></shop-detail>
<!-- cart view -->
<shop-cart name="cart" cart="[[cart]]" total="[[total]]"></shop-cart>
<!-- checkout view -->
<shop-checkout name="checkout" cart="[[cart]]" total="[[total]]" route="{{subroute}}"></shop-checkout>
<shop-404-warning name="404"></shop-404-warning>
</iron-pages>
In the "shop-list" element, I have added
attached: function() {
console.log("I am attached..");
},
detached: function() {
console.log("I am detached..");
}
When I run the application, and visit the Shop-List view, in the console, "I am attached" is shown. When i go to other pages, shop-list's detach event is not triggered.
And whatever data that is stored in the Shop-List view will persist if I go back to the screen.
How to avoid this?
Can we have a new instance created each time the page is visited and clean up the logic on page change??
Everything you will propably need is property page. Whenever this property change, you have to observe it and make changes. So something like this:
page: {
type: String,
value: "foo",
observer: "_observePage"
},
and then define a function called _observePage
_observerPage: function(newValue, oldValue) {
// handle logic like reset data and so on
}
function _observerPage is called everytime when page property changes. There are also 2 variables passed to the function, represents new value and old value of page
link to documentation: https://www.polymer-project.org/1.0/docs/devguide/observers
There are another solutions. Like using page.js which can be seen in many Polymer tutorial videos. This library simplify your project routing very much. You can define functions for page enter and page exit.
And about new instance every time you visit site:
Solution would be delete and re-create that element. For example
var list = document.querySelector("shop-list");
document.body.removeChild(list);
var newList = doucment.createElement("shop-list");
document.body.appendChild(newList);
I'm developing app for Windows Phone 8.1 using WinJS and I used Visual Studio's template for pivot application. My Applications queries external API and displays results in PivotItem. Since there are three very similar queries that reurn same type of data, I'd like to reuse one code for all the sections in Pivot. The PivotItem page consist basically only of ListView with items received from API. My section page javascript looks like this:
var ControlConstructor = WinJS.UI.Pages.define("/pages/bookmarks/sectionPage.html", {
ready: function(element, options) {
//Here I call API based on received option and render the page
}
}
WinJS.Namespace.define("bookmarksApps_SectionControls", {
SectionControl: ControlConstructor
});
My page declaring the Pivot looks like this:
<div class="bookmarks" data-win-control="WinJS.UI.Pivot" data-win-res="{ winControl: {'title': 'BookmarksTitle'} }">
<div class="section1 section" data-win-control="WinJS.UI.PivotItem" data-win-options="{ isHeaderStatic: true }" data-win-res="{ winControl: {'header': 'BookmarksNew'} }">
<div class="sectioncontrol" id="section1contenthost" data-win-control="bookmarksApps_SectionControls.SectionControl" data-win-options="{'section': 'new'}"></div>
</div>
<div class="section2 section" data-win-control="WinJS.UI.PivotItem" data-win-options="{ isHeaderStatic: true }" data-win-res="{ winControl: {'header': 'BookmarksAll'} }">
<div class="sectioncontrol" id="section2contenthost" data-win-control="bookmarksApps_SectionControls.SectionControl" data-win-options="{'section': 'all'}"></div>
</div>
<div class="section3 section" data-win-control="WinJS.UI.PivotItem" data-win-options="{ isHeaderStatic: true }" data-win-res="{ winControl: {'header': 'BookmarksHistory'} }">
<div class="sectioncontrol" id="section3contenthost" data-win-control="bookmarksApps_SectionControls.SectionControl" data-win-options="{'section': 'history'}"></div>
</div>
</div>
Now, when I open the app,pivot page correctly loads and displays first section with data. But when I swipe the different section, new data is loaded (so the ready function is called, but nothing is displayed (page is blank, only PivotItems' headers are visible). But if I swipe back to section1, it contains data, that I want to display in section2.
Is it possible to reuse my SectionPage.html and SectionPage.js in different PivotItems, preferably without too much of boilerplate code?
You need to create custom HTML control which will host these pages, custom control can accept uri as data-win-options, then inside your control you can have updateLayout() which will render the page and append to parentElement.
Sample code in update layout method:
var options = {} //Page options
if (!this._isLoaded) {
this._isLoaded = true;
WinJS.UI.Pages.render(this.uri, this._pageElement, options);
}
I found source of my problem. In page /pages/bookmarks/sectionPage.html I had <div> with an id meant for holding my ListVIew. And I was getting win control for listview using document.getElementById("listViewId").winControl. This is wrong, because then I had three divs with same id (each for every section), so getElementById was always returning same list (the one on the first section).
So I changed getting of the wincontrol to
var discussionList = document.querySelector("#" + contentHost + " .disucssionsListView").winControl;
where contentHost depends on data-win-options received from main page and everything works as expected.
This question already has an answer here:
When dynamically adding dart polymer elements, how do I get observable variables to on DOM
(1 answer)
Closed 8 years ago.
I have read this thread about how to pass data to a polymer element
Button click in polymer dart does not work; needs polymer-element
But however, if I want to pass data to a programmatically created element by using createElement() in polymer.dart, there's no wrapping template. How am I going to pass the data as mentioned above?
Btw, even though I think dart is a really cool language (I dislike JavaScript,) I found polymer in dart maybe still not ready yet. A lot of things are not documented and have to go though examples or ask here.
Thanks,
Yi
I think you should remove the start()-function from MyElementElement-class and add it to upper level. Basically you shouldn't have any reference in custom-element to upper level objects. Now the custom element is not reuseable, it works only within this context.
I have searched for a long time but anything work. Only one solution work fine for me: https://stackoverflow.com/a/20067111/189411
Here is my example on how i passed data to a dynamically created custom polymer-element.
My intention was, click on an "a href" and load a polymer-element in a container div.
polymer_element.html
<polymer-element name="my-element">
<template bind>
<p> {{ mytext }} </p>
</template>
<script type="application/dart" src="polymer_myelement.dart"></script>
</polymer-element>
polymor_element.dart
import 'dart:html';
import 'package:polymer/polymer.dart';
import 'package:custom_element/custom_element.dart';
#CustomTag('polymer-myelement')
class MyElementElement extends PolymerElement with ObservableMixin {
bool get applyAuthorStyles => true;
#observable String mytext = "initial text";
void start() {
query('#a href to click').onClick.listen((MouseEvent event){
query('.container').children.clear();
var myElem = createElement('polymer-myelement');
MyElementElement myel = myElem.xtag;
myel.mytext = "i changed the text now or import w/e you want";
query('.container').children.add(myElem);
});
}
}
main() {
MyElementElement el = new MyElementElement();
el.start();
}
index.html
<head>
<link rel="import" href="polymer_myelement.html">
and everything you need ...
</head>
<body>
<a href to click>click me for new text</a>
<div class="container">
<!-- START OF MAINCONTAINER -->
<!-- END OF MAINCONTAINER -->
</div>
</body>
So here is the explanation:
In my main() i just run my start() function and set an onclickListener for my navigation bar href. When i click my href now, i just clear all children in my "div class="container", because i always want a clear div before i insert my polymer-elements.
Now create a polymer-Element with "createElement('polymer-mylement');".
Create a MyElement object and assign the polymer-element "xtag" to it.
Now you have access to all the properties and can change them.
Just add your created Element to your div and you are done.
You just dynamically created a polymer-element, assigned your new data to it and see it in your index.html