| <!doctype html> |
| <div id="host1"> </div> |
| <div id="host2"> </div> |
| <div id="host3"> </div> |
| <div id="host4"> </div> |
| <div id="host5"> </div> |
| <div id="host6"> </div> |
| <div id="host7"> </div> |
| <div><div id="host8"> </div></div> |
| <script> |
| host1.attachShadow({mode: "open"}).innerHTML = ` |
| <style> |
| .nested { |
| background-color: red; |
| width: 30px; |
| height: 30px; |
| margin: 10px; |
| } |
| :is(:host) .nested { |
| background-color: green; |
| width: 30px; |
| height: 30px; |
| margin: 10px; |
| } |
| </style> |
| <div class="nested"></div> |
| `; |
| |
| host2.attachShadow({mode: "open"}).innerHTML = ` |
| <style> |
| .nested { |
| background-color: red; |
| width: 30px; |
| height: 30px; |
| margin: 10px; |
| } |
| :is(foo,:host) .nested { |
| background-color: green; |
| width: 30px; |
| height: 30px; |
| margin: 10px; |
| } |
| </style> |
| <div class="nested"></div> |
| `; |
| |
| host3.attachShadow({mode: "open"}).innerHTML = ` |
| <style> |
| .nested { |
| background-color: green; |
| width: 30px; |
| height: 30px; |
| margin: 10px; |
| } |
| :not(:host) .nested { |
| background-color: red; |
| } |
| </style> |
| <div class="nested"></div> |
| `; |
| |
| host4.attachShadow({mode: "open"}).innerHTML = ` |
| <style> |
| .nested { |
| background-color: red; |
| width: 30px; |
| height: 30px; |
| margin: 10px; |
| } |
| :is(:is(:host)) .nested { |
| background-color: green; |
| width: 30px; |
| height: 30px; |
| margin: 10px; |
| } |
| </style> |
| <div class="nested"></div> |
| `; |
| |
| host5.attachShadow({mode: "open"}).innerHTML = ` |
| <style> |
| div { |
| background-color: red; |
| width: 30px; |
| height: 30px; |
| margin: 10px; |
| } |
| :is(:host(div)) .nested { |
| background-color: green; |
| width: 30px; |
| height: 30px; |
| margin: 10px; |
| } |
| </style> |
| <div class="nested"></div> |
| `; |
| |
| host6.innerHTML = ` |
| <style> |
| .nested { |
| background-color: red; |
| } |
| :is(:host, #host6) .nested { |
| background-color: green; |
| width: 30px; |
| height: 30px; |
| margin: 10px; |
| } |
| </style> |
| <div class="nested"></div> |
| `; |
| |
| host7.attachShadow({mode: "open"}).innerHTML = ` |
| <style> |
| div { |
| background-color: red; |
| width: 30px; |
| height: 30px; |
| margin: 10px; |
| } |
| :is(:host, :host) .nested { |
| background-color: green; |
| width: 30px; |
| height: 30px; |
| margin: 10px; |
| } |
| </style> |
| <div class="nested"></div> |
| `; |
| |
| host8.attachShadow({mode: "open"}).innerHTML = ` |
| <style> |
| .nested { |
| background-color: green; |
| width: 30px; |
| height: 30px; |
| margin: 10px; |
| } |
| :is(div) .nested { |
| background-color: red; |
| width: 30px; |
| height: 30px; |
| margin: 10px; |
| } |
| </style> |
| <div class="nested"></div> |
| `; |
| </script> |
