HTML - Tags - <shadow>

#117 of 147

         <p>content-0 original</p>
     <template id="shadow-1-template">
         <p>content-1 from shadow 1</p>
     <template id="shadow-2-template">
         <p>content-2 from shadow 2</p>
         var template1 = document.getElementById('shadow-1-template').content;
         var template2 = document.getElementById('shadow-2-template').content;
         var elts = document.getElementsByTagName('my-custom-element');
         for (var i = 0; i < elts.length; i++) {
             var elt = elts[i];
             var shadow1 = elt.createShadowRoot();
             var content1 = template1.cloneNode(true);
             var shadow2 = elt.createShadowRoot();
             var content2 = template2.cloneNode(true);

The shadow element marks the insertion point for Shadow DOM content.

Obsolete Use the slot element instead.

Creating multiple shadow roots on a single DOM element is now deprecated.

A live example:

content-0 original

See also: slot

N of

Ads by Google

Ask a question, send a comment, or report a problem - click here to contact me.

© Richard McGrath