Added shadow DOM example page

This page will allow us to investigate if it is possible to capture the selection event from outside the shadow DOM, and if so, how can we do it.

Added shadow DOM example page
This page will allow us to investigate if it is possible to capture the selection event from outside the shadow DOM, and if so, how can we do it.
daf40260 · Eduardo Sanz García · Eduardo · d2c75c20 · daf40260 · daf40260
Commit daf40260 authored Jan 25, 2021 by Eduardo Sanz García Committed by Eduardo Jan 26, 2021
Show whitespace changes
Inline Side-by-side

Showing with 45 additions and 1 deletion

shadow-dom.mustache dev-server/documents/html/shadow-dom.mustache +43 -0

index.mustache dev-server/templates/index.mustache +2 -1

No files found.
--- a/dev-server/documents/html/shadow-dom.mustache
+++ b/dev-server/documents/html/shadow-dom.mustache
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Hypothesis Client Test</title>
+<style>
+  body {
+    font-family: sans-serif;
+  }
+</style>
+  <template id="my-paragraph">
+    <style>
+      p {
+        color: white;
+        background-color: #666;
+        padding: 5px;
+      }
+     </style>
+     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+  </template>
+  <script>
+    customElements.define('my-paragraph',
+      class extends HTMLElement {
+        constructor() {
+          super();
+          let template = document.getElementById('my-paragraph');
+          let templateContent = template.content;
+    
+          const shadowRoot = this.attachShadow({mode: 'open'})
+            .appendChild(templateContent.cloneNode(true));
+        }
+      }
+    );
+  </script>
+</head>
+<body>
+  <h2>Shadow DOM example</h2>
+  <p>The following two paragraphs contain texts inside shadow DOMs. This page allows testing the addition and display of annotations in this scenario.</p>
+  <my-paragraph></my-paragraph>
+  <my-paragraph></my-paragraph>
+  {{{hypothesisScript}}}
+  </body>
+</html>
--- a/dev-server/templates/index.mustache
+++ b/dev-server/templates/index.mustache
@@ -19,7 +19,8 @@
    <li><a href="/document/burns">Poems and Songs of Robert Burns</a></li>
    <li><a href="/document/doyle">The Disappearance of Lady Carfax, by Arthur Conan Doyle</a></li>
    <li><a href="/document/tolstoy">Anna Karenina, by Leo Tolstoy</a></li>
-    <li><a href="/document/z-index">z-index page</a></li>
+    <li><a href="/document/z-index">z-index playground</a></li>
+    <li><a href="/document/shadow-dom">shadow DOM playground</a></li>
  </ul>

  <h2>Test PDF documents</h2>