picker-and-slotted.html (1020B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <link rel=match href="picker-and-slotted-ref.html"> 4 <link rel="author" title="L. David Baron" href="https://dbaron.org/"> 5 <link rel="author" title="Google" href="http://www.google.com/"> 6 <script src="/resources/testdriver.js"></script> 7 <script src="/resources/testdriver-vendor.js"></script> 8 9 <div id="host"> 10 <select> 11 <option>one</option> 12 <option>two</option> 13 </select> 14 </div> 15 16 <script> 17 18 let host = document.getElementById("host"); 19 let shadow = host.attachShadow({mode: "open"}); 20 shadow.innerHTML = ` 21 <style> 22 #myslot::slotted(select), #myslot::slotted(select)::picker(select) { 23 appearance: base-select; 24 } 25 #myslot::slotted(select)::picker(select) { 26 border: thick solid blue; 27 background: lime; 28 color: maroon; 29 } 30 </style> 31 <slot id="myslot"></slot> 32 `; 33 34 35 (async () => { 36 await test_driver.bless(); 37 document.querySelector('select').showPicker(); 38 document.documentElement.classList.remove('reftest-wait'); 39 })(); 40 41 </script>