| <!DOCTYPE html> | |
| <style> | |
| div { font-family: monospace; } | |
| </style> | |
| <div id="host">HOST</div> | |
| <script> | |
| var host = document.getElementById('host'); | |
| var root = host.createShadowRoot(); | |
| root.innerHTML = '\ | |
| <style>\ | |
| :host::before { content: "before shadow root:"; }\ | |
| :host::after { content: ":after shadow root"; }\ | |
| </style>\ | |
| <span>SHADOW</span>'; | |
| </script> |