Shadow DOM

A method of combining multiple DOM trees into one hierarchy and how these trees interact with each other within a document, thus enabling better composition of the DOM. Shadow DOM is part of Web Components' set of standards.

EXTENSIONS TO ELEMENT INTERFACE

• Attributes
  shadowRoot - Represents the youngest shadow root that context object hosts.
• Methods
  createShadowRoot - Create and returns a new instance of the ShadowRoot object
  getDestinationInsertionPoints - Return a static NodeList consisting of insertion points in the destination insertion points of the context object

CREATE SHADOW DOM

To create a new instance of the ShadowRoot object use createShadowRoot method, as part of Element interface.

<div id="example_1"></div>

<script>
var root = document.querySelector('#example_1').createShadowRoot();
root.innerHTML = '<div><input type="text"> <button>Alert</button></div>';
</script>

• How to use selectors:

document.querySelector('#example_1').querySelector("button"); // null
document.querySelector('#example_1').shadowRoot.querySelector("button");

THE CONTENT ELEMENT

The content element represents an insertion point in the shadow tree.

• Attributes
  select
• Methods
  getDistributedNodes

<div id="example_2">
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
</div>

<script>
var root_2 = document.querySelector('#example_2').createShadowRoot();

var content = document.createElement('content');
content.setAttribute('select', 'h4');
root_2.appendChild(content);

content = document.createElement('content');
content.setAttribute('select', 'h5');
root_2.appendChild(content);
</script>

• How to use selectors:

document.querySelector('#example_2').querySelector("h4");
document.querySelector('#example_2').querySelector("h5");
document.querySelector('#example_2').shadowRoot.querySelector("::content");
document.querySelector('#example_2').shadowRoot.querySelectorAll("::content");
document.querySelector('#example_2').shadowRoot.querySelector('::content').getDistributedNodes();
document.querySelector('#example_2').shadowRoot.querySelectorAll('::content')[0].getDistributedNodes();
document.querySelector('#example_2 h4').getDestinationInsertionPoints();

THE SHADOW ELEMENT

The shadow element represents an shadow insertion point in a shadow tree.

• Methods
  getDistributedNodes

<ul id="example_3">
    <li class="odd">Link 1</li>
    <li>Link 2</li>
    <li class="odd">Link 3</li>
    <li class="other">Link 4</li>
    <li class="odd">Link 5</li>
    <li>Link 6</li>
</ul>

<script>
var host = document.querySelector('#example_3');
var root_3a = host.createShadowRoot();
    
var div = document.createElement('div');
div.className = 'odd';
div.innerHTML = '<ul><content select=".odd"></content></ul>';
root_3a.appendChild(div);

div = document.createElement('div');
div.innerHTML = '<ul><content select=""></content></ul>';
root_3a.appendChild(div);

var root_3b = host.createShadowRoot();
div = document.createElement('div');
div.innerHTML = '<ul><content select=".other"></content></ul>';
root_3b.appendChild(div);
root_3b.appendChild(document.createElement('shadow'));
</script>

• How to use selectors:

document.querySelector('#example_3').querySelector("li");
document.querySelector('#example_3').querySelector("li.odd");
document.querySelector('#example_3').shadowRoot.querySelector("::content");
document.querySelector('#example_3').shadowRoot.querySelector("::content").getDistributedNodes();
document.querySelector('#example_3 li').getDestinationInsertionPoints();

Check out our live demos.

BROWSER COMPATIBILITY

Chrome 25+, Firefox 29+, Opera 15+. For polyfilling try Google's Polymer and WebComponents.