--- /dev/null
+<H1>Elements in shadow DOM</H1>
+<p>Inspired by ChromeDriver's page for shadow dom webdriver tests. The page has a shadow root that in turn contains two shadow roots. So we can check behaviour with both nested roots and younger/older sibling roots.
+<div>
+ <div id="innerDiv" style="border-style:solid;border-color:yellow">
+ <span class='originalcontent'>original content</span>
+ </div>
+</div>
+<template id="parentTemplate">
+ <div id="parentDiv">
+ <div style="border-style:solid;border-color:green">
+ <H3 class="shadowheading parentshadowheading">Parent</H3>
+ <H4>Parent Contents</H4>
+ <content></content>
+ </div>
+ </div>
+</template>
+<template id="olderChildTemplate">
+ <div id="olderChildDiv">
+ <div style="border-style:solid;border-color:red">
+ <H3 class="shadowheading oldershadowheading">Older Child</H3>
+ <H4>Older Child Contents</H4>
+ <content></content>
+ </div>
+ </div>
+</template>
+<template id="youngerChildTemplate">
+ <div id="youngerChildDiv">
+ <div style="border-style:solid;border-color:blue">
+ <H3 class="shadowheading youngershadowheading">Younger Child</H3>
+ <div style="border-style:dotted;border-color:blue">
+ <H4>
+ Younger Child Contents
+ </H4>
+ <content></content>
+ </div>
+ <div style="border-style:dashed;border-color:blue">
+ <H4>Younger Child Shadow</H4>
+ <shadow></shadow>
+ </div>
+ </div>
+ </div>
+</template>