Web component

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>my-component</title>
    <script data-require="webcomponents.js@0.7.24" data-semver="0.7.24" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.24/webcomponents.min.js"></script>
    <link rel="import" href="my-component.html">
  </head>

  <body>
    <my-component color="red" log="Hello"></my-component>
  </body>

</html>

<template>
  <style>
    .my-component {
      display: block;
      padding: 20px;
    }
  </style>

  <div class="my-component">
    <p>This is a custom element!</p>
  </div>
</template>

<script>
  (function(window, document, undefined) {
    // index.html document
    var doc = document;
    // my-component document
    var self = (doc._currentScript || doc.currentScript).ownerDocument;
    // get <template>
    var template = self.querySelector('template').content;

    // Shim Shadow DOM styles if needed
    if (window.ShadowDOMPolyfill) {
        WebComponents.ShadowCSS.shimStyling(template, 'my-component');
    }

    class MyComponent extends HTMLElement {
      constructor() {
        super();
      }

      connectedCallback() {
        var color = this.getAttribute('color');
        var log = this.getAttribute('log');

        var shadowRoot = this.attachShadow({mode:'open'});  

        // clone template into shadow root
        var clone = doc.importNode(template, true);
        shadowRoot.appendChild(clone);
        
        var myComponent = shadowRoot.querySelector('.my-component');

        myComponent.style.color = color;
        console.log(log);
      }
    }
    window.customElements.define('my-component', MyComponent);
    
  }(window, document));
</script>