polymer Getting started with polymer Basic Element Structure

Example

We got the following very basic element my-element saved as src/my-element.html

<link rel="import" href="bower_components/polymer/polymer.html">

<dom-module id="my-element">

  <template>
    <style>
      /* local styles go here */
      :host {
        display: block;
      }
    </style>
    <!-- local DOM goes here -->
    <content></content>
  </template>

  <script>
    Polymer({
      /* this is the element's prototype */
      is: 'my-element'
    });
  </script>

</dom-module>

• The <link> includes the Polymer library using an HTML import.
• The <dom-module> is the local DOM wrapper for the element (in this case, my-element).
• The <template> is the actual local DOM definition.
• The <style> inside the <template> lets you define styles that are scoped to this element and its local DOM and will not affect anything else in the document.
• The <content> will hold anything you place inside your element.
• The :host pseudo class matches the custom element (my-element).
• The Polymer call registers the element.
• The is Property is the element's name (it has to match the <dom-module>'s id)

You can import it in your app using:

<link rel="import" href="src/my-element.html">

And use it as a tag:

<my-element>Content</my-element>