gistfile1.html

<link rel="import" href="../core-resizable/core-resizable.html">
<link rel="import" href="../core-selectable/core-selectable.html">
<link rel="import" href="../x-fancy-input/x-fancy-input.html">

<dom-module id="style-guide">

  <style>

    style-guide {
      display: block;
    }

    style-guide > :not(.selected) {
      display: none !important;
    }

  </style>

  <template>

    <section id="foo">
      <h1>Howdy, Gisters</h1>
      <p class="title">This is a style guide for custom elements.</p>
      <x-fancy-input value="{{foo}}"></x-fancy-input>
    </section>

    <section>
      <h2>This is another block of ipsum content</h2>
      <label for="likeSelect">What do you think?</label>
      <select id="likeSelect">
        <option>Like it</option>
        <option>Love it</option>
      </select>
    </section>

  </template>

</dom-module>

<script>

  Polymer({

    is: 'style-guide',

    mixins: [
      'core-resizer',
      'core-selectable'
    ],

    published: {
      foo: String,

      bar: {
        type: Boolean,
        notify: true
      }
    },

    bind: {
      foo: 'fooChanged',
      bar: 'barChanged'
    },

    listeners: {
      click: 'clickAction'
    },

    ready: function() {
      // do something
    },

    fooChanged: function(foo) {
      // do something
    },

    barChanged: function(bar) {
      // do something
    },

    clickAction: function() {
      // do something
    }

  });

</script>