lang-pseudo-class-across-shadow-boundaries.html (1134B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="help" href="https://drafts.csswg.org/selectors/#lang-pseudo"> 5 <link rel="match" href="lang-pseudo-class-across-shadow-boundaries-ref.html"> 6 </head> 7 <body> 8 <p>Test passes if you see a single 100px by 100px green box below.</p> 9 <style> 10 #testCases div { width: 100px; height: 25px; } 11 #host1:lang(zh) { background: green; } 12 #host3 > :lang(ja) { background: green; } 13 #host4 > div { background: red; } 14 </style> 15 <div id="testCases"> 16 <div id="host1" lang="zh"><div></div></div> 17 <div id="host2" lang="de"><div></div></div> 18 <div id="host3" lang="ja"><div></div></div> 19 <div id="host4"><div></div></div> 20 </div> 21 <script> 22 host1.attachShadow({mode: 'closed'}).innerHTML = '<slot></slot>'; 23 host2.attachShadow({mode: 'closed'}).innerHTML = '<style> div { width: 100px; height: 25px; background: red; } div:lang(de) { background: green; } </style><div></div>'; 24 host3.attachShadow({mode: 'closed'}).innerHTML = '<slot lang="en"></slot>'; 25 host4.attachShadow({mode: 'closed'}).innerHTML = '<style> :lang(ja)::slotted(*) { background: green !important; } </style><slot lang="ja"></slot>'; 26 </script> 27 </body> 28 </html>