Ghost in the Shadow DOM


Ryan Seddon

Me


Shadow what now?


  • You've been using the shadow DOM
  • Part of a parent spec Web Components
  • Pretty big deal



Take this simple input





Peak under the hood


  • It hides all the structural markup
  • behind something that looks simple


Create a shadow DOM


Helper method

function createShadowRoot(elem) {
  var shadowRoot = 
    Modernizr.prefixed('createShadowRoot', 
        document.documentElement, false);
  
  if(shadowRoot) {
    return elem[shadowRoot]();
  } else {
    // No support :(
  }
}


Preserve the content



<content> is powerful




Styling in the shadows


  • You can include <style>
  • Create your own pseudo-elements!
  • Use @host to target the root element
  • ::distributed() pseudo element

Including <style>



Custom pseudo-elements



@host {}



::distributed()



All four in play


When can I use it?

Only scratched the surface


Read all of these great articles for more in-depth look


Thanks!