Source Code:
(back to article)
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> <template id="tmpl"> <style> p { font-weight: bold; } </style> <p id="message"></p> </template> <div id="elem">Click me</div> <script> elem.onclick = function() { elem.attachShadow({mode: 'open'}); elem.shadowRoot.append(tmpl.content.cloneNode(true)); // (*) elem.shadowRoot.getElementById('message').innerHTML = "Welcome to W3Docs! Hello from the shadows"; }; </script> </body> </html>
Result:
Report an issue