Here is a basic starting point for a WebComponent. It is by no means a law or rule or even showing the complete set of things you can do... but that is the beauty of the platform :)

gistfile1.txt

<element name="x-thing" attributes="" constructor="x-thing" reset-style-inheritance="false">
  //INCLUDE A LITE COMMENT FOR API HERE? LINK? COPYRIGHT?
  <template> <!-- INERT MARKUP -->
    <style>
      /* default styles */
      @host {
        *{
          position: relative;
          opacity: 1;
          width:100%;
          height:100%;
        }
        :scope:unresolved {
         opacity: 0;
        }
        :scope:hover {
          opacity: 1;
        }
      }
      .wrapper {
        /* if you like wrappers */
      }
      .content {
        /* style your shadow dom stuff */
      }

    </style>
    <div class="wrapper"> </div>
    <!-- FILTER IN THE H1 INTO TEMPLATE -->
    <content select="h1"></content>
    <!-- LET ALL OTHER UNMATCHED CONTENT BLEED THROUGH -->
    <content></content>
  </template>
  <script>
    if(this !== window) {
      var template = this.querySelector('template');

      this.register({
        prototype: {
          readyCallback: function() {
            try{
              var root = this.createShadowRoot();
              root.applyAuthorStyles = false;
              root.resetStyleInheritance = true;root.appendChild(template.content.cloneNode(true));
            }catch(e){}
          },
          insertedCallback: function() {
            // i am called on insert before render
          },
          removedCallback: function() {
            // i am called when removed
          },
          attributeChangedCallback: function() {
            // i am called when attributes are changed
          },
          apiCall1: function(param) {
            // i am accessible via js
          },
          apiCall2: function(param) {
            // i am accessible via js
          }
        }
      });
    }
  </script>
</element>