test-element.html

<!--
Sample web component created using polymer-micro and a small set of helpers.
-->

<!-- Note use of polymer-micro instead of full Polymer. -->
<link rel="import" href="bower_components/polymer/polymer-micro.html">

<!-- Note that we can use a real template, not a dom-module. -->
<template id="test-element">
  Hello, <content></content><span id="punctuation">.</span>
</template>

<script>
// polymer-micro supplies a slimmed-down version of the Polymer class factory.
Polymer({

  // Since polymer-micro supports Polymer behaviors, we can mix in the
  // additional features we want as a behavior.
  behaviors: [MinimalComponent],

  is: 'test-element',

  // polymer-micro supports marshalling of attributes to properties.
  properties: {
    punctuation: {
      type: String
    }
  },

  // Expose the punctuation as a property/attribute.
  // This property is data-bindable, but the internal implementation itself
  // doesn't rely on the data binding feature from the full Polymer.
  get punctuation() {
    return this.$.punctuation.textContent;
  },
  set punctuation(value) {
    if (this.$.punctuation.textContent !== value) {
      this.$.punctuation.textContent = value;
      // Fire a change event for Polymer-compatible data binding.
      // TODO: We may need to add a 'value' property to the event details.
      this.dispatchEvent(new CustomEvent('punctuation-changed'));
    }
  },

  // The component can supply a reference to its own template. This reference
  // is grabbed at the point this file is imported (as an HTML Import). The
  // "currentImport" global is defined by Polymer. Here we use it to scan
  // through this document and find the template element at the top of the file.
  template: currentImport.querySelector('#test-element')

});
</script>