slotted-link.html (815B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Scoping: ::slotted :link</title> 4 <link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> 5 <link rel="help" href="https://drafts.csswg.org/css-scoping/#slotted-pseudo"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <div id="host"><a id="a" href="#notvisited">This link should be green.</a></div> 9 <script> 10 let root = host.attachShadow({mode:"open"}); 11 root.innerHTML = ` 12 <style> 13 ::slotted(:link) { color:green } 14 ::slotted(:visited) { color:red } 15 </style> 16 <slot></slot>`; 17 18 test(() => { 19 assert_equals(getComputedStyle(a).color, "rgb(0, 128, 0)", "Unvisited link should be green."); 20 }, "Check that we match :link and not :visited for slotted anchor."); 21 </script>