cross-shadow-boundary-slot-reversed.html (762B)
1 <!doctype html> 2 <head> 3 <link rel="match" href="cross-shadow-boundary-slot-reversed-ref.html"/> 4 </head> 5 <div id="host"></div> 6 <script> 7 const root = host.attachShadow({mode:"open", slotAssignment: "manual"}); 8 root.innerHTML="<span>Start</span> <slot></slot> <span>End</span>" 9 10 const node1 = document.createElement("span"); 11 node1.innerText = "text1"; 12 13 const node2 = document.createElement("span"); 14 node2.innerText = "text2"; 15 16 // Note that node1 is before node2 in DOM order, but users will 17 // see node2 is ahead of node1. 18 host.appendChild(node1); 19 host.appendChild(node2); 20 21 root.querySelector("slot").assign(node2, node1); 22 23 // "xt2tex" is selected 24 window.getSelection().setBaseAndExtent(node2.firstChild, 2, node1.firstChild, 3); 25 </script>