<!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>