| <html> | |
| <head> | |
| <template id="shadow-template"> | |
| <div style="color: red;"><h1>Hello from the shadow dom!</h1></div> | |
| </template> | |
| </head> | |
| <body onload="addShadowDOM()"> | |
| <div id="element_in_an_iframe"></div> | |
| <script> | |
| function addShadowDOM() { | |
| var host = document.getElementById("element_in_an_iframe").attachShadow({mode: 'open'}); | |
| var template = document.querySelector("#shadow-template"); | |
| host.appendChild(template.content); | |
| template.remove(); | |
| } | |
| </script> | |
| </body> | |
| </html> |