shadow-root-002.html (1155B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Shadow DOM Test: Basic distribution</title> 6 <link rel="match" href="shadow-root-002-ref.html"> 7 <link rel="author" title="Anna Ogawa" href="mailto:anna.ogawa.0219@gmail.com"> 8 <link rel="author" title="Yuta Kitamura" href="mailto:yutak@google.com"> 9 <link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#shadow-trees"> 10 <meta name="assert" content="On distribution, content element is replaced with the shadow host's children."> 11 <script src="../../../html/resources/common.js"></script> 12 <style> 13 p { color: black; } 14 .pass { color: green; } 15 * { color: red; } 16 </style> 17 </head> 18 <body> 19 <p> 20 You should see four lines of green text "A", "B", "C" and "D" below, 21 in this order. 22 </p> 23 <div id="host"> 24 <div class="pass">B</div> 25 <div class="pass">C</div> 26 </div> 27 <script> 28 var shadowRoot = window.host.attachShadow({mode: 'open'}); 29 30 shadowRoot.innerHTML = 31 '<style>\n' + 32 '.shadow-pass { color: green; }\n' + 33 '* { color: red; }\n' + 34 '</style>' + 35 '<div class="shadow-pass">A</div>\n' + 36 '<slot>FAIL</slot>' + 37 '<div class="shadow-pass">D</div>'; 38 </script> 39 </body> 40 </html>