https://www.polymer-project.org/2.0/start/install-2-0
Pre-requisites
--------------
npm install -g bower
npm install -g polymer-cli
Quick start
-----------
mkdir my-app
cd my-app
1. Create skeleton project
polymer init
//Press the down arrow until polymer-2-starter-kit is highlighted and press the enter / return key to select.
2. Run from the folder created
polymer serve --open
3. Run tests
polymer test --open
Next steps:
----------
1. add element
bower install --save PolymerElements/paper-checkbox
Polymer video: https://skillsmatter.com/skillscasts/5743-introduction-to-building-polymer-web-components
HTML5 video tag:
1. https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video
2. Open video tag : (set chrome inspector >> settings >> Elements >> show shadow DOM
3. Components made of :
HTML templates - the html that defines the web component eg: HTML for video tag
Custome elements - The things that gets injected into the shadow DOM
Shadow DOM
HTML imports
4. Anatomy of a web component:
//html here
Pre-requisites
--------------
npm install -g bower
npm install -g polymer-cli
Quick start
-----------
mkdir my-app
cd my-app
1. Create skeleton project
polymer init
//Press the down arrow until polymer-2-starter-kit is highlighted and press the enter / return key to select.
2. Run from the folder created
polymer serve --open
3. Run tests
polymer test --open
Next steps:
----------
1. add element
bower install --save PolymerElements/paper-checkbox
Polymer video: https://skillsmatter.com/skillscasts/5743-introduction-to-building-polymer-web-components
HTML5 video tag:
1. https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video
2. Open video tag : (set chrome inspector >> settings >> Elements >> show shadow DOM
3. Components made of :
HTML templates - the html that defines the web component eg: HTML for video tag
Custome elements - The things that gets injected into the shadow DOM
Shadow DOM
HTML imports
4. Anatomy of a web component:
//html here
5. Without Polymer also we can create above components
var sr=DOMelement.createShadowRoot();
sr.AC(doc.QS("#template")).content.cloneNode(true);
6. Polymer - API written by google to create shadow DOM web components.
Includes pre-written web components.
Browser support is limited but provides polyfills for older browsers
Polyfills
Provides things mentioned in point 3.
HTML templates - the html that defines the web component eg: HTML for video tag
Custome elements - The things that gets injected into the shadow DOM
Shadow DOM
Model driven views
Web animations
Pointer events
PPT: http://slides.com/bobbijvoet/redux-polymer-8#/26
