Untitled

<!DOCTYPE html>
<html lang="en">
  <body>
    <likeable-element></likeable-element>
    <paper-item>
      <paper-item-body two-line>
        <div>Show your status</div>
        <div secondary>Your status is visible to everyone</div>
      </paper-item-body>
      <iron-icon icon="warning"></iron-icon>
    </paper-item>

    <script type="module">
      // Import an element
      import '//unpkg.com/@polymer/paper-checkbox/paper-checkbox.js?module';

      // Import the PolymerElement base class and html helper
      import {PolymerElement, html} from '//unpkg.com/@polymer/polymer/polymer-element.js?module';
      import '//unpkg.com/@polymer/paper-item/paper-item.js?module';


      // Define an element class
      class LikeableElement extends PolymerElement {

        // Define publc API properties
        static get properties() { return { liked: Boolean }}

        // Define the element's template
        static get template() {
          return html`
            <style>
              .response { margin-top: 10px; }
            </style>
            <paper-checkbox checked="{{liked}}">I like web components.</paper-checkbox>

            <div hidden$="[[!liked]]" class="response">Web components like you, too.</div>
          `;
        }
      }

      // Register the element with the browser
      customElements.define('likeable-element', LikeableElement);
    </script>
  </body>
</html>