slotted-with-pseudo-element.html (1240B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Scoping: pseudo element after ::slotted</title> 4 <link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-scoping/#slotted-pseudo"> 6 <link rel="match" href="slotted-with-pseudo-element-ref.html"> 7 <div id="host1"><span></span></div> 8 <div id="host2"><span></span></div> 9 <div id="host3"><span></span></div> 10 <div id="host4"><span></span></div> 11 <style> 12 #host3 > span::before { content: "PASS" } 13 </style> 14 <script> 15 function attachShadowWithSlottedStyle(host, styleString) { 16 var root = host.attachShadow({mode:"open"}); 17 root.innerHTML = "<style>"+styleString+"</style><slot></slot>"; 18 } 19 20 attachShadowWithSlottedStyle(host1, "::slotted(span)::before { content: 'PASS' }"); 21 attachShadowWithSlottedStyle(host2, "::slotted(span)::after { content: 'PASS' }"); 22 attachShadowWithSlottedStyle(host3, "::slotted(span)::before { content: 'FAIL'; color: green }"); 23 attachShadowWithSlottedStyle(host4, ` 24 ::slotted(span)::before { content: 'PASS'; color: red } 25 ::slotted(.foo)::before { color: green } 26 `); 27 onload = function() { 28 host4.offsetTop; 29 host4.firstElementChild.classList.add("foo"); 30 } 31 </script>