| <!DOCTYPE html> |
| <title>Kuma Reftest</title> |
| <div> |
| Not Kuma |
| <div id="first" invisible="invisible"> |
| First Kuma |
| <h1> |
| Inside Kuma |
| </h1> |
| <span id="firstHost"> |
| Kuma Host |
| </span> |
| </div> |
| <div> |
| Not Kuma, again |
| <span id="secondHost"> |
| Second Host |
| <div> |
| I'm gonna be invisible. |
| </div> |
| </span> |
| </div> |
| <p invisible> |
| Another Kuma |
| </p> |
| <ul> |
| <li invisible="">First</li> |
| <li>Second</li> |
| </ul> |
| </div> |
| |
| <script> |
| const firstShadowRoot = firstHost.attachShadow({mode: 'open'}); |
| firstShadowRoot.innerHTML = "not <b>visible</b>"; |
| |
| const secondShadowRoot = secondHost.attachShadow({mode: 'open'}); |
| const visibleDiv = document.createElement("div"); |
| div.innerHTML = "<i>visible</i>"; |
| secondShadowRoot.appendChild(visibleDiv); |
| const slot = document.createElement("slot"); |
| slot.invisible = "invisible"; |
| secondShadowRoot.appendChild(slot); |
| </script> |