| <!doctype html> |
| <html> |
| <head> |
| <script> |
| function runTest() { |
| var shadow = document.querySelector('#test2').webkitCreateShadowRoot(); |
| var template = document.querySelector('template'); |
| shadow.appendChild(template.content); |
| } |
| </script> |
| </head> |
| <body onload="runTest()"> |
| <template> |
| <style> |
| .container { |
| border:1px solid black; |
| } |
| .container>.number { |
| color:red; |
| } |
| .container>.letters { |
| color:blue; |
| } |
| </style> |
| <div class="container"> |
| <div class="number"><content select=".number"></content></div> |
| <div class="letters"><content select=".letters"></content></div> |
| </div> |
| </template> |
| |
| <div id="test1"> |
| <div class="number">1</div> |
| <div class="letters">QUX</div> |
| </div> |
| |
| <div id="test2"> |
| <div class="number">2</div> |
| <div class="letters">FOO</div> |
| </div> |
| |
| <div id="test3"> |
| <div class="number">3</div> |
| <div class="letters">BAR</div> |
| </div> |
| </body> |
| </html> |
