How to Install Polymer core elements using Bower in Chrome Dev Editor
Polymer core elements are utility elements that are either visual or non-visual that are used to work with layouts,user inputs etc.To use these core elements,one is required to Install Bower which is a web packaging tool.Note that once you install Polymer component using Bower,all its dependencies are installed under bower_components.
How to Install Polymer core elements
If you inspect bower-components folder,you will see some of the pre-installed paper components.We could Install these elements by running “bower install Polymer/core-elements” in the command prompt but since Chrome Dev Editor has no interface to run this,We will have to manually edit bower.json file and include below code.
Add core dependencies to bower.json file
After adding above code,Right click on Json file in the editor then Run Bower Update Option
Install the Roboto font
The next dependencies to be installed is Roboto font.
The same way we did with installing bower components,Click to edit bower.json file.
Add below code to the file.
After adding above code,Right click on Json file in the editor then Run Bower Update Option.
Your bower.json code should look like the one below.
The next step is creating application root elements.
How to Create Polymer Application root element
In world of Polymers,everything is an element and even our application is a element to.
- Create a File in Chrome Editor Dev and name it codelab-app.html
- Add some basic markup for the element in that file.
- Using HTML,import load the file in index.html
- Declare element instance on the page.
In codelab-app.html add this code
Next is editing style.css file
Last file to Edit is index.html.In the head section of this file we will import codelab-app.html using below code.
Then we remove all the index.html content in the body and declare <codelab-app></codelab-app>
Running the App
Click Run button and you should see this result “Hello Google Polymers….Getting started”
Don’t forget to share this article.