dimanche 21 février 2016

How to: Insert elements into a shadow DOM from outsite a shadow Host?

As far as I have researched, it is only possible to insert elements into a shadow dom that are within the shadow host.

Example:

<div id="myShadowHost"><h1>This is my host</h1></div>


<script>
//attach a shadow to myShadowHost
var myHost=document.querySelector('#myShadowHost').createShadowRoot();
//Declare an insertion point 
var content = document.createElement('content');
//select element to pull into the insertion point, in this case the h1
content.setAttribute('select', 'h1');
//append to shadowHost the insertion point and pulled element.
myHost.appendChild(content);
</script>`

Ultimately I'd like to pull into the shadow elements that are outside of the shadow host.

Aucun commentaire:

Enregistrer un commentaire