HTML - Tags - <shadow>

#117 of 147
shadow

 <html>
 <body>
     <my-custom-element>
         <p>content-0 original</p>
     <my-custom-element>
     <template id="shadow-1-template">
         <shadow></shadow>
         <p>content-1 from shadow 1</p>
     </template>
     <template id="shadow-2-template">
         <shadow></shadow>
         <p>content-2 from shadow 2</p>
     </template>
     <script>
         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);
             shadow1.appendChild(content1);
             var shadow2 = elt.createShadowRoot();
             var content2 = template2.cloneNode(true);
             shadow2.appendChild(content2);
         }
     </script>
 </body>
 </html>
 

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