Getting started with polymer-1.0

Remarks#

The example above shows bare minimum structure of a custom(Polymer) element using local dom.
A Polymer element can also be created entirely using script tag, but that is not part of this topic.
Even though style tag is not a part of bare minimum structure it has been kept there just for understanding purpose.
Also, script tag can be used in both imperative and declarative fashion i.e user can have a separate js file with atleast above written code and then refer it in element.
Please note that id of dom-module and is property of Polymer constructor should always be same.

Versions#

Version	Release Date
v1.6.0	2016-06-29
v1.5.0	2016-05-31
v1.4.0	2016-05-18
v1.0.0	2015-05-27

Element structure

Defining an element with no content.

<dom-module id="empty-element">
  <template>
    <style>
    </style>
  </template>

  <script>
    Polymer({
      is: 'empty-element',
    });
  </script>
</dom-module>

And then you can use the new element in any other pages.

<!DOCTYPE html>
<html>
    <head>
        <!-- Using lite version as Polymer does not require Polyfill for Shadow Dom -->
        <script src="path/to/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
        <!-- Importing the element assuming file name is also empty-element.html -->
        <link rel="import" href="empty-element.html">
    </head>

    <body>
        <empty-element></empty-element>
    </body>
</html>