CodePen

HTML

            
              <script src="http://sole.github.io/WebComponentsMonkeyPatch/WebComponentsMonkeyPatch.js"></script>
            
          
!
via HTML Inspector

CSS

            
              button {
  padding: 1rem;
}

.error {
  color: red;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var div = document.createElement('div');

if(HTMLElement.prototype.createShadowRoot) {
  var input = document.createElement('button');
  input.innerHTML = 'click to create shadow root';
  document.body.appendChild(input);
  
  input.addEventListener('click', createShadow, false);
  
} else {
  document.body.innerHTML = '<div class="error">Sorry, but your browser does not support Shadow DOM no matter how hard I try. If using Firefox Nightly, be sure to set <tt>dom.webcomponents.enabled</tt> to true in <tt>about:config</tt></div>';
}

function createShadow() {
  window.alert(div.createShadowRoot());
}
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................