Add shadow DOM example

server.rb

@@ -159,6 +159,10 @@ def get_mime_type_for(filename)
     erb :dropdown
   end
 
+  get '/shadowdom' do
+    erb :shadowdom
+  end
+
   def random_notification_message
     messages = [
       'Action successful',

views/examples.erb

@@ -35,6 +35,7 @@
   <li><a href='/nested_frames'>Nested Frames</a></li>
   <li><a href='/notification_message'>Notification Messages</a></li>
   <li><a href='/redirector'>Redirect Link</a></li>
+  <li><a href='/shadowdom'>Shadow Dom</a></li>
   <li><a href='/download_secure'>Secure File Download</a></li>
   <li><a href='/shifting_content'>Shifting Content</a></li>
   <li><a href='/slow'>Slow Resources</a></li>

views/shadowdom.erb

@@ -0,0 +1,43 @@
+<h1>Simple template</h1>
+
+<script>
+    customElements.define('my-paragraph',
+        class extends HTMLElement {
+            constructor() {
+                super();
+
+                const template = document.getElementById('my-paragraph');
+                const templateContent = template.content;
+
+                this.attachShadow({mode: 'open'}).appendChild(
+                    templateContent.cloneNode(true)
+                );
+            }
+        }
+    );
+
+    const slottedSpan = document.querySelector('my-paragraph span');
+
+</script>
+
+<template id="my-paragraph">
+  <style>
+    p {
+      color: white;
+      background-color: #666;
+      padding: 5px;
+    }
+  </style>
+  <p><slot name="my-text">My default text</slot></p>
+</template>
+
+<my-paragraph>
+  <span slot="my-text">Let's have some different text!</span>
+</my-paragraph>
+
+<my-paragraph>
+  <ul slot="my-text">
+    <li>Let's have some different text!</li>
+    <li>In a list!</li>
+  </ul>
+</my-paragraph>