Getting started with Polymer 3.0

The Polymer library provides a set of features for creating custom elements. These features are designed to make it easier and faster to make custom elements that work like standard DOM elements. Similar to standard DOM elements, Polymer elements can be:

  • Instantiated using a constructor or .
  • Configured using attributes or properties.
  • Populated with internal DOM inside each instance.
  • Responsive to property and attribute changes.
  • Styled with internal defaults or externally.
  • Responsive to methods that manipulate its internal state.

Polymer team has not yet confirmed the stable release as they mentioned its an experimental version in their blog

“ Polymer 3.0 preview is available to experiment with, and today’s installment will get you started. But note that we use the word “experiment” advisedly. This is a very early preview, and there are definitely rough edges aplenty.”

Now you can start working with polymer with your favorite tools like NPM package manager like npm , yarn and modules using ES6.

Installation

To get started you have to update your polymer CLI

You’ll also need to install the Yarn package manager to install components .See the Yarn installation page for instructions.

Now to check preview you need to have chrome 61 or latest safari since they have polyfill support in the browser.

Install dependencies with Yarn

In npm the polymer components are published under namespace

Initialize the project:

Edit the generated file and add the property.

Install components using , which is equivalent to . For example:

Import dependencies

You can import a module in HTML using <. For example, your might look like this:

From inside a module, you can import a module using the statement:

As with Bower dependencies, reusable elements should not include the in the path (for example ).

There are a few important things to note about modules and the statement:

  • Like HTML imports, the import must use a path, not a module name.
  • The imported path must start with “", "", or "".
  • The statement can only be used inside a module (that is, an external file or inline script loaded with
  • Modules always run in strict mode.

There are several forms of the import statement. For the most part, elements modules register an element but don’t export any symbols, so you can use this simple import statement:

For behaviors, you’ll typically import the behavior explicitly:

For utility modules like that export several members, you can import individual members, or import the entire module:

Different module are structured differently; until we have a API docs for 3.0, you may need to look at the source code to figure out what a given module exports.

Defining elements

Instead of defining elements in HTML Imports, you’ll define elements in ES6 modules. Aside from the obvious difference that you’re writing a JavaScript file instead of an HTML file, there are three major differences in the new format:

  • Imports use ES6 import syntax, not .
  • Templates are defined by providing a getter that returns a string—not the and elements.
  • Instead of defining globals (for example, when defining behaviors or mixins) use the statement to export symbols from modules.

For example:

As you can see, except for the changes noted above, the element definition looks the same as 2.x. So far there are only a handful of changes to the 2.x API, all related to dynamic imports: in particular, the function is no longer supported; this is slated to be replaced by dynamic ES6 imports.

For a reusable element, the import for the Polymer class would omit the folder:

Run the project

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Achuth hadnoor

On my way to be an indie developer, creator creating a focus on better living.