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 objectgetDestinationInsertionPoints– 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.