Samples and code snippets for my Polymer in Production article series

my-name-polymer-1.x.html

<!-- Polymer 1.x -->
<link rel="import" href="../polymer/polymer.html">

<dom-module id="my-name">
  <template>
    <style>
      /* Amazing CSS to make my-name shine goes here */
    </style>
    <span>[[firstname]] [[lastname]]</span>
  <template>
  <script>
    Polymer({
      is: 'my-name',
      properties: {
        firstname: String,
        lastname: String
      }
    });
  </script>
</dom-module>

my-name-polymer-2.x.html

<!-- Polymer 2.x -->
<link rel="import" href="../polymer/polymer-element.html">

<dom-module id="my-name">
  <template>
    <style>
      /* Amazing CSS to make my-name shine goes here */
    </style>
    <span>[[firstname]] [[lastname]]</span>
  <template>
  <script>
    class MyName extends Polymer.Element {
      static get is() { return 'my-name'; }
      static get properties() {
        return {
          firstname: String,
          lastname: String
        };
      }
    }

    window.customElements.define(MyName.is, MyName);
  </script>
</dom-module>

my-name-polymer-3-x.js

/* Polymer 3.x - warning, early preview, things might change */
import { Element } from '../../@polymer/polymer/polymer-element.js';

class MyName extends Element {
  static get template() {
    return `
    <style>
      /* Amazing CSS to make my-name shine goes here */
    </style>
    <span>[[firstname]] [[lastname]]</span>
`;
  }

  static get is() { return 'my-name'; }
  static get properties() {
    return {
      firstname: String,
      lastname: String
    };
  }
}

window.customElements.define(MyName.is, MyName);