cross-shadow-boundary-slot-complex-2.html (864B)
1 <!doctype html> 2 <head> 3 <link rel="match" href="cross-shadow-boundary-slot-complex-2-ref.html"/> 4 </head> 5 <div id="host"> 6 <template shadowrootmode="open"> 7 in shadow 8 <slot name="1"></slot> 9 <div> 10 <template shadowrootmode="open"> 11 in nested shadow 12 <slot></slot> 13 <span id="inNestedShadow">in nested shadow</span> 14 </template> 15 <slot name="2"></slot> 16 </div> 17 in shadow 18 </template> 19 <span id="slot1" slot="1">--slotted 1--</span> 20 <span id="slot2" slot="2">--slotted 2--</span> 21 </div> 22 <script> 23 // This selects: 24 25 // lotted 1-- 26 // in nested shadow --slotted 2-- in nest 27 const nestedRoot = host.shadowRoot.querySelector("div").shadowRoot; 28 window.getSelection() 29 .setBaseAndExtent( 30 slot1.firstChild, 3, 31 nestedRoot.getElementById("inNestedShadow").firstChild, 32 7); 33 </script>