JSFiddle - React, Tailwind, and code Playground

HTML

<template id="shadowtree">
  <video controls style="width:640px;height:360px;">
      <content></content>
  </video>
</template>
<video-player id="host" controls width="640" height="360" theme="blue">
       <source src="http://addyosmani.github.io/video-player/devstories.webm" type="video/webm;codecs=&quot;vp8, vorbis&quot;">
       <source src="http://addyosmani.github.io/video-player/devstories.mp4" type="video/mp4;codecs=&quot;avc1.42E01E, mp4a.40.2&quot;">
</video-player>

JavaScript

var VideoPlayer = Object.create(HTMLElement.prototype);
VideoPlayer.createdCallback = function() {
    // Do stuff
    var shadowRoot = host.createShadowRoot();
    var clone = document.importNode(shadowtree.content, true);
    shadowRoot.appendChild(clone);
};

/*
VideoPlayer.foo = function() {
  console.log('foo() called');
};
*/

var VPlayer = document.registerElement('video-player', {
  prototype: VideoPlayer
});