| <!DOCTYPE html> |
| <style> |
| .square { width: 100px; height: 100px; } |
| </style> |
| <p>You should see two green squares below.</p> |
| <div id="host1"> |
| <div class="square"></div> |
| </div> |
| <br> |
| <div id="host2"> |
| <div class="square"></div> |
| </div> |
| <script> |
| host1.createShadowRoot().innerHTML = "<style>.c::content .square { background-color: green }</style><content></content>"; |
| host2.createShadowRoot().innerHTML = "<style>.c::content * { background-color: green }</style><content></content>"; |
| document.body.offsetTop; // Force style recalc. |
| host1.shadowRoot.querySelector("content").className = "c"; |
| host2.shadowRoot.querySelector("content").className = "c"; |
| </script> |
