protractor/testapp/shadow/shadow.html

Webdriver E2E test wrapper for Angular.

<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>