cross-shadow-boundary-img.html (761B)
1 <!doctype html> 2 <head> 3 <link rel=match href="cross-shadow-boundary-img-ref.html"> 4 </head> 5 OuterText1 6 <div id="host1"></div> 7 OuterText2 8 <div id="host2"></div> 9 OuterText3 10 <script> 11 const root1 = document.getElementById("host1").attachShadow({ mode: "open" }); 12 root1.innerHTML = "innerText1"; 13 14 const root2 = document.getElementById("host2").attachShadow({ mode: "open" }); 15 root2.innerHTML = "<div></div>"; 16 17 const root3 = root2.querySelector("div").attachShadow({ mode: "open" }); 18 root3.innerHTML = "<img>"; 19 20 const img = root3.querySelector("img"); 21 img.style.width = "10px"; 22 img.style.height = "10px"; 23 img.style.backgroundColor = "black"; 24 25 getSelection().setBaseAndExtent(document.body.firstChild, 3, document.body.childNodes[4], 3); 26 </script>