Select Page

Getting started with Polymer 3.0

Polymer 3.0 preview is available to experiment with, until the full, production release of Polymer 3.x. So, let’s get started.

Install the latest Polymer CLI:

npm install -g polymer-cli

Install Yarn package manager:

Follow the instruction from official Yarn package manager installation page.

[Note: Yarn supports the following sever range of Node.js: “^4.8.0 || ^5.7.0 || ^6.2.2 || ^8.0.0”. Update Node.js accordingly.]


Create a new folder for your project:

mkdir polymer3
cd polymer3

Initialize your project:

yarn init

Answer the prompts to set up your project (in most cases, you can just accept the default answer for all of the prompts).


Install components using Yarn:

yarn add --flat @polymer/polymer@next

yarn add --flat will install all the dependencies, but only allow one version for each package. You can also add "flat": true property in package.json file so that you can do yarn add @polymer/polymer@next only.


Create index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

    <title>Hello Polymer 3</title>
    <meta name="description" content="Polymer 3 Getting started">
	
	<base href="/">
	
    <script
        src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js">
    </script>
	
    <!-- Import the my-app element's module. -->
    <script type="module" src="src/my-app.js"></script>
	
  </head>
  <body>
    <my-app></my-app>
  </body>
</html>

Create my-app.js inside src folder

import {Element as PolymerElement}
    from '../node_modules/@polymer/polymer/polymer-element.js';

export class MyApp extends PolymerElement {

  // Define a string template instead of a `<template>` element.
  static get template() {
    return `<div>This is my first [[name]] app.</div>`
  }

  constructor() {
    super();
    this.name = 'Polymer 3.0 preview';
  }

  // properties, observers, etc. are identical to 2.x
  static get properties() {
    name: {
      Type: String
    }
  }
}

customElements.define('my-app', MyApp);

Finally view the project

polymer serve --npm

Reference: Hands-on with the Polymer 3.0 preview

Download code

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *