| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <style> |
| body, html, main { |
| margin: 0; |
| width: 100%; |
| height: 100%; |
| } |
| |
| section { |
| display: inline-block; |
| } |
| </style> |
| <script> |
| addEventListener("load", () => { |
| const outerShadowRoot = document.querySelector("main").attachShadow({ mode: "open" }); |
| outerShadowRoot.innerHTML = ` |
| <style> |
| section { |
| width: 400px; |
| height: 600px; |
| border: 2px solid black; |
| } |
| </style> |
| <section></section>`; |
| |
| const innerShadowRoot = outerShadowRoot.querySelector("section").attachShadow({ mode: "open" }); |
| innerShadowRoot.innerHTML = ` |
| <style> |
| div { |
| width: 400px; |
| height: 200px; |
| box-sizing: border-box; |
| } |
| .red { background-color: rgb(255, 59, 48); } |
| .green { background-color: rgb(52, 199, 89); } |
| .blue { background-color: rgb(0, 122, 255); } |
| </style> |
| <div class="red"></div> |
| <div class="green"></div> |
| <div class="blue"></div>`; |
| }); |
| </script> |
| </head> |
| <body> |
| <main></main> |
| </body> |
| </html> |
