Shadow DOM - Pktasks.com Your Source for Crypto News and Job Opportunities"

Post Top Ad

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");
shadow-dom, shadow dom,shadow root,dom,shadow host,shadowdom,shadow dom root,shadow dom styling,styling shadow dom,shadow dom element,shadow dom explained,shadow,change styles in shadow dom,view encapsulation shadow dom,chromedriver shadow dom support,moving shadow,html5,light dom,javascript,angular,html,dom & roland,web components,react,web,shadow-dom,#shadowdom,#shadowhost,#shadowroot,tutorial,framework,team: scalable advocacy,google

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

Check out our live demos.

BROWSER COMPATIBILITY

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

No comments:

Post a Comment

Post Top Ad