<head></head><body>
<div class="parent">
  <div class="child"></div>
</div>
<div class="shadowHost">shadowHost</div>

<script>
const parent = document.querySelector(".parent");
const child = document.querySelector(".child");
const shadowHost = document.querySelector(".shadowHost");
parent.getRootNode() == document || alert("bad parent root node");
child.getRootNode() == document || alert("bad child root node");
// create a ShadowRoot
const shadowRoot = shadowHost.attachShadow({ mode: "open" });
shadowRoot.innerHTML =
  '<style>div{background:#2bb8aa;}</style><div class="shadowChild">shadowChild</div>';
const shadowChild = shadowRoot.querySelector(".shadowChild");
shadowChild.getRootNode() === shadowRoot || alert("bad shadow child root node");
shadowChild.getRootNode({ composed:false}) === shadowRoot|| alert("bad composed false root node");
shadowChild.getRootNode({ composed:true}) === document|| alert("bad composed true root node");
</script>
