Cacher is the code snippet organizer for pro developers

window.registerCustomElement = (function(){
  var noop = function(){}
  var CustomElement = (function(){
    var p = Object.create(HTMLElement.prototype).__proto__;
    Object.keys(events.EventEmitter.prototype).forEach(function(k){
        p[k] = events.EventEmitter.prototype[k];
      })
  
    p.createdCallback = function(){
      var doc = this.currentScript.ownerDocument;
      var n = this.tagName.toLowerCase()
      var shadow = this.createShadowRoot();
      var template = doc.querySelector("template[name=\""+n+"\"]");
      var el = template.content.cloneNode(true);
      shadow.appendChild(el);      
      (this.onCreate||noop).apply(this, arguments);
      this.emit("created");
    }
    p.attachedCallback = function(){
      (this.onAttach||noop).apply(this, arguments);
      this.emit("attached");
    }
    p.detachedCallback = function(){
      (this.onDetached||noop).apply(this, arguments);
      this.emit("detached");
    }
    p.attributeChangedCallback = function(){
      (this.onChange||this.onchange||noop).apply(this, arguments);
      this.emit.apply(this, ["change"].concat(arguments))
    }
    
    return p;
  }());
  return function(n, x){
    var p = Object.create(CustomElement);
    Object.keys(x).forEach(function(k){p[k] = x[k];})
    document.registerElement(n, {prototype: p});
  }
}())

<script src="https://wzrd.in/standalone/events@latest"></script>
<script src="https://cdn.polyfill.io/v1/polyfill.min.js"></script>
<script src="https://gist.github.com/lordvlad/735d304037070a8fe999/raw/4ce73c39a01c8cf4dda3c7350bf6be2d6807e4be/register-element.js"></script>

.outer.zoom {
  transform: scale(0.5);
}
.outer {
    transform: scale(1.0);
    transition-property: transform;
    transition-duration: 400ms;
    border: 2px solid brown;
    border-radius: 1em;
    background: red;
    font-size: 20pt;
    width: 12em;
    height: 7em;
    text-align: center;            
}
.inner {
    color: white;
    font-family: sans-serif;
    padding: 0.5em;
}
.name {
    color: black;
    background: white;
    font-family: "Futura", cursive;
    font-size: 45pt;
    padding-top: 0.2em;
}

registerCustomElement("name-badge", {
  onAttach: function(){
    var l=this.shadowRoot.querySelector(".outer").classList;
    setTimeout(function(){
      l.remove("zoom")
     })
  }
}); 

<template name="name-badge">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.js"></script>
    <link rel="stylesheet/less" type="text/css" href="https://gist.githubusercontent.com/lordvlad/735d304037070a8fe999/raw/f69204c51c45d53747a883974e5e4474351380ce/name-badge.less"/>
    
    <div class="outer zoom">
        <div class="inner">
            Hi! My name is
        </div>
        <div class="name">
            <content></content>
        </div>
    </div>
  
    <script src="https://gist.githubusercontent.com/lordvlad/735d304037070a8fe999/raw/ac3aa05fc644fbb05adca413bf674246c8634e77/name-badge.js"></script>
</template>