slotted-slot.html (882B)
1 <!DOCTYPE html> 2 <title>CSS Test: ::slotted() not matching slot elements</title> 3 <link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/css-scoping/#slotted-pseudo"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <div id="host" style="color:green">This text should be green.</div> 8 <script> 9 test(() => { 10 let root = host.attachShadow({mode:"open"}); 11 root.innerHTML = '<div><slot id="slot"></slot><div>'; 12 let innerHost = root.firstChild; 13 let innerRoot = innerHost.attachShadow({mode:"open"}); 14 innerRoot.innerHTML = "<style>::slotted(#slot){color:red}</style><slot></slot>"; 15 assert_equals(getComputedStyle(root.querySelector("#slot")).color, "rgb(0, 128, 0)"); 16 }, "Check that ::slotted does not match slot elements"); 17 </script>