| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| content { |
| color: blue; |
| } |
| </style> |
| </head> |
| <body> |
| <div> |
| <content>Should be colored blue.</content> |
| </div> |
| <div> |
| <div id="hostWithChild">Should have no cool color.</div> |
| <content id="toBeMoved">Should have no cool color either.</content> |
| <div id="hostEmpty"></div> |
| </div> |
| <script> |
| // Ensures that distributed shadow child isn't effected by the style. |
| var hostWithChild = document.getElementById("hostWithChild"); |
| var shadowForHostWithChild = hostWithChild.webkitCreateShadowRoot(); |
| shadowForHostWithChild.appendChild(document.createElement("content")); |
| |
| // Also ensures that dynamically moved <content> elements do work. |
| var hostEmpty = document.getElementById("hostEmpty"); |
| var shadowForHostEmpty = hostEmpty.webkitCreateShadowRoot(); |
| shadowForHostEmpty.appendChild(document.getElementById("toBeMoved")); |
| |
| </script> |
| </body> |
