OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <style> |
| 3 .square { width: 100px; height: 100px; } |
| 4 </style> |
| 5 <p>You should see two green squares below.</p> |
| 6 <div id="host1"> |
| 7 <div class="square"></div> |
| 8 </div> |
| 9 <br> |
| 10 <div id="host2"> |
| 11 <div class="square"></div> |
| 12 </div> |
| 13 <script> |
| 14 host1.createShadowRoot().innerHTML = "<style>.c::content .square { background-co
lor: green }</style><content></content>"; |
| 15 host2.createShadowRoot().innerHTML = "<style>.c::content * { background-color: g
reen }</style><content></content>"; |
| 16 document.body.offsetTop; // Force style recalc. |
| 17 host1.shadowRoot.querySelector("content").className = "c"; |
| 18 host2.shadowRoot.querySelector("content").className = "c"; |
| 19 </script> |
OLD | NEW |