Categories

Shadow DOM

Posted on: August 9, 2015 by Dimitar Ivanov

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");

Shadow DOM

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();

Shadow DOM

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();

Shadow DOM

Check out our live demos.

Browser compatibility

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

More Web Components
References
Share this post

If you have any questions about shadow dom please drop a comment below. And don't forget to share this article. Thanks so much for reading!


0 Comments

Leave a comment

Captcha