starting with polymer 2.0 in visual studio

I was looking for an alternative for angular 2/4 since I realized that typescript development is not so funny as it looks like... even not in visual studio... as an angular 1 developer I liked the features of angular but was kind of overwhelmed from the overhead I needed to setup the same thing in angular 2/4. So after some days of research I found polymer which fits perfectly.

With VS2017 we have full bower support which is great so just start with the download of the bower-package polymer (menu: project/bower-package management). The dependencies are installed automatically which makes it easy to startup my project. Additionally I added the bower_components folder into my project and started with an html page (more exactly with an asp.net page, but that does not really matter for this article).

On the same level as bower_components I added a folder elements where I wanted to place my polymer-elements. My "hello world"-example in here is a polymer-element called say-hello.html which says hello to a person who's name is added as a parameter.

The code of this html file is quite simple:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<link rel="import" href="../bower_components/polymer/polymer-element.html"> <dom-module id="say-hello"> <template> <style> :host { color: forestgreen; } </style> <div>Hello {{guy}}!</div> </template> <script> class SayHello extends Polymer.Element { constructor() { super(); } static get is() { return 'say-hello'; } static get properties() { return { guy: { type: String, value: '<default_name>' } }; } } customElements.define(SayHello.is, SayHello); </script> </dom-module>

Without going into any further details say-hello.html can now print "Hello John!" in green to John if John is set as the parameter value of name in a call like <say-hello guy="John"></say-hello>

Very helpful resource for e.g.: the class definitions in javascript (ES6) is http://es6-features.org/#ClassDefinition which I used a lot.

kr,
Daniel