From b3ce161f7929517ffca28e3414d201ee551b1dfd Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrin@google.com>
Date: Mon, 8 Aug 2016 16:36:14 -0700
Subject: [PATCH] dynamic imports

---
 demo/ce-v0.html           | 207 ------------------------------------
 demo/ce-v1.html           | 213 --------------------------------------
 demo/ce.html              | 127 +++++++++++++++++++++++
 demo/index.html           |   6 +-
 demo/nytimes.html         |   2 +-
 demo/v0/x-a.html          |  49 +++++++++
 demo/v0/x-b.html          |  53 ++++++++++
 demo/v0/x-trap-focus.html |  64 ++++++++++++
 demo/v1/x-a.html          |  51 +++++++++
 demo/v1/x-b.html          |  55 ++++++++++
 demo/v1/x-trap-focus.html |  66 ++++++++++++
 11 files changed, 469 insertions(+), 424 deletions(-)
 delete mode 100644 demo/ce-v0.html
 delete mode 100644 demo/ce-v1.html
 create mode 100644 demo/ce.html
 create mode 100644 demo/v0/x-a.html
 create mode 100644 demo/v0/x-b.html
 create mode 100644 demo/v0/x-trap-focus.html
 create mode 100644 demo/v1/x-a.html
 create mode 100644 demo/v1/x-b.html
 create mode 100644 demo/v1/x-trap-focus.html
diff --git a/demo/ce-v0.html b/demo/ce-v0.html
deleted file mode 100644
index f7e9ecf..0000000
--- a/demo/ce-v0.html
+++ /dev/null
@@ -1,207 +0,0 @@
-<!--
-Copyright 2016 Google Inc. All rights reserved.
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-    http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
--->
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <title>blockingElements polyfill test page</title>
-  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-  <link rel="import" href="../blocking-elements.html">
-  <link rel="import" href="logger.html">
-</head>
-
-<body>
-
-  <template id="x-trap-focus">
-    <style>
-      :host {
-        display: block;
-        border: 1px solid lightgray;
-        padding: 5px;
-        margin: 5px;
-      }
-
-      :host(.blocking) {
-        outline: 9999px solid rgba(0, 0, 0, 0.5);
-      }
-
-      label {
-        display: block;
-        margin-bottom: 5px;
-      }
-    </style>
-    <label>
-      <input id="toggle" type="checkbox"> Make blocking element
-    </label>
-    <content id="xtrapfocus"></content>
-  </template>
-
-  <template id="x-a">
-    <style>
-      :host {
-        display: block;
-        border: 1px solid orange;
-        padding: 5px;
-        margin: 5px;
-      }
-    </style>
-    <button>x-a</button>
-    <x-trap-focus class="in-x-a">
-      <content id="xa"></content>
-    </x-trap-focus>
-  </template>
-
-  <template id="x-b">
-    <style>
-      :host {
-        display: block;
-        border: 1px solid red;
-        padding: 5px;
-        margin: 5px;
-      }
-    </style>
-    <button>x-b</button>
-    <x-trap-focus class="in-x-b">
-      <x-a class="in-x-b">
-        <button>in x-b</button>
-        <content id="xb"></content>
-      </x-a>
-    </x-trap-focus>
-  </template>
-
-  <script>
-    (function() {
-      'use strict';
-
-      if (!Element.prototype.createShadowRoot) {
-        console.warn('ShadowDom v0 is not supported by this browser.');
-        return;
-      }
-
-      class XTrapFocus extends HTMLElement {
-        connectedCallback() {
-          const t = document.querySelector('#x-trap-focus');
-          const clone = document.importNode(t.content, true);
-          clone.querySelector('#toggle').addEventListener('change', this._toggleTrap.bind(this));
-          this.createShadowRoot().appendChild(clone);
-        }
-
-        _toggleTrap(evt) {
-          this.classList[evt.target.checked ? 'add' : 'remove']('blocking');
-          document.$blockingElements[evt.target.checked ? 'push' : 'remove'](this);
-        }
-      }
-      customElements.define('x-trap-focus', XTrapFocus);
-
-      class XA extends HTMLElement {
-        connectedCallback() {
-          const clone = document.importNode(document.getElementById('x-a').content, true);
-          this.createShadowRoot().appendChild(clone);
-        }
-      }
-      customElements.define('x-a', XA);
-
-      class XB extends HTMLElement {
-        connectedCallback() {
-          const clone = document.importNode(document.getElementById('x-b').content, true);
-          this.createShadowRoot().appendChild(clone);
-        }
-      }
-      customElements.define('x-b', XB);
-    })();
-  </script>
-
-
-  <input inert placeholder="inert input">
-
-  <x-trap-focus inert>
-    inert x-trap-focus
-  </x-trap-focus>
-
-
-  <h2>x-trap-focus</h2>
-  <x-trap-focus id="simple">
-    <input placeholder="in body">
-  </x-trap-focus>
-
-  <p>
-    nested
-  </p>
-  <x-trap-focus id="nested-outer">
-    <input placeholder="in body">
-    <x-trap-focus id="nested-inner">
-      <input placeholder="in body">
-    </x-trap-focus>
-  </x-trap-focus>
-
-  <h2>x-a</h2>
-  <x-a>
-    <input placeholder="in body">
-  </x-a>
-
-  <p>
-    nested
-  </p>
-  <x-a>
-    <input placeholder="in body">
-    <x-a>
-      <input placeholder="in body">
-    </x-a>
-  </x-a>
-  <p>
-    with x-trap-focus
-  </p>
-  <x-a>
-    <input>
-    <x-trap-focus id="nested-in-xa">
-      <input placeholder="in body">
-    </x-trap-focus>
-  </x-a>
-
-  <h2>x-b</h2>
-  <x-b>
-    <input placeholder="in body">
-  </x-b>
-
-  <p>
-    nested
-  </p>
-  <x-b>
-    <input placeholder="in body">
-    <x-b id="innerXB">
-      <input placeholder="in body">
-    </x-b>
-  </x-b>
-
-  <p>
-    with x-trap-focus
-  </p>
-  <x-b>
-    <input placeholder="in body">
-    <x-trap-focus id="nested-in-xb">
-      <input placeholder="x-trap-focus in body">
-    </x-trap-focus>
-  </x-b>
-
-  <h2>Lots of focusable elements</h2>
-  <script>
-    for (let i = 0; i < 100; i++) {
-      document.body.appendChild(document.createElement('input'));
-    }
-  </script>
-
-  <script src="../../inert/inert.js"></script>
-</body>
-
-</html>
diff --git a/demo/ce-v1.html b/demo/ce-v1.html
deleted file mode 100644
index aaa3a46..0000000
--- a/demo/ce-v1.html
+++ /dev/null
@@ -1,213 +0,0 @@
-<!--
-Copyright 2016 Google Inc. All rights reserved.
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-    http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
--->
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <title>blockingElements polyfill test page</title>
-  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-  <link rel="import" href="../blocking-elements.html">
-  <link rel="import" href="logger.html">
-</head>
-
-<body>
-
-  <template id="x-trap-focus">
-    <style>
-      :host {
-        display: block;
-        border: 1px solid lightgray;
-        padding: 5px;
-        margin: 5px;
-      }
-
-      :host(.blocking) {
-        outline: 9999px solid rgba(0, 0, 0, 0.5);
-      }
-
-      label {
-        display: block;
-        margin-bottom: 5px;
-      }
-    </style>
-    <label>
-      <input id="toggle" type="checkbox"> Make blocking element
-    </label>
-    <slot id="xtrapfocus"></slot>
-  </template>
-
-  <template id="x-a">
-    <style>
-      :host {
-        display: block;
-        border: 1px solid orange;
-        padding: 5px;
-        margin: 5px;
-      }
-    </style>
-    <button>x-a</button>
-    <x-trap-focus class="in-x-a">
-      <slot id="xa"></slot>
-    </x-trap-focus>
-  </template>
-
-  <template id="x-b">
-    <style>
-      :host {
-        display: block;
-        border: 1px solid red;
-        padding: 5px;
-        margin: 5px;
-      }
-    </style>
-    <button>x-b</button>
-    <x-trap-focus class="in-x-b">
-      <x-a class="in-x-b">
-        <button>in x-b</button>
-        <slot id="xb"></slot>
-      </x-a>
-    </x-trap-focus>
-  </template>
-
-  <script>
-    (function() {
-      'use strict';
-
-      if (!Element.prototype.attachShadow) {
-        console.warn('ShadowDom v1 is not supported by this browser.');
-        return;
-      }
-
-      class XTrapFocus extends HTMLElement {
-        connectedCallback() {
-          const t = document.querySelector('#x-trap-focus');
-          const clone = document.importNode(t.content, true);
-          clone.querySelector('#toggle').addEventListener('change', this._toggleTrap.bind(this));
-          this.attachShadow({
-            mode: 'open'
-          }).appendChild(clone);
-        }
-
-        _toggleTrap(evt) {
-          this.classList[evt.target.checked ? 'add' : 'remove']('blocking');
-          document.$blockingElements[evt.target.checked ? 'push' : 'remove'](this);
-        }
-      }
-      customElements.define('x-trap-focus', XTrapFocus);
-
-      class XA extends HTMLElement {
-        connectedCallback() {
-          const clone = document.importNode(document.getElementById('x-a').content, true);
-          this.attachShadow({
-            mode: 'open'
-          }).appendChild(clone);
-        }
-      }
-      customElements.define('x-a', XA);
-
-      class XB extends HTMLElement {
-        connectedCallback() {
-          const clone = document.importNode(document.getElementById('x-b').content, true);
-          this.attachShadow({
-            mode: 'open'
-          }).appendChild(clone);
-        }
-      }
-      customElements.define('x-b', XB);
-    })();
-  </script>
-
-
-  <input inert placeholder="inert input">
-
-  <x-trap-focus inert>
-    inert x-trap-focus
-  </x-trap-focus>
-
-
-  <h2>x-trap-focus</h2>
-  <x-trap-focus id="simple">
-    <input placeholder="in body">
-  </x-trap-focus>
-
-  <p>
-    nested
-  </p>
-  <x-trap-focus id="nested-outer">
-    <input placeholder="in body">
-    <x-trap-focus id="nested-inner">
-      <input placeholder="in body">
-    </x-trap-focus>
-  </x-trap-focus>
-
-  <h2>x-a</h2>
-  <x-a>
-    <input placeholder="in body">
-  </x-a>
-
-  <p>
-    nested
-  </p>
-  <x-a>
-    <input placeholder="in body">
-    <x-a>
-      <input placeholder="in body">
-    </x-a>
-  </x-a>
-  <p>
-    with x-trap-focus
-  </p>
-  <x-a>
-    <input>
-    <x-trap-focus id="nested-in-xa">
-      <input placeholder="in body">
-    </x-trap-focus>
-  </x-a>
-
-  <h2>x-b</h2>
-  <x-b>
-    <input placeholder="in body">
-  </x-b>
-
-  <p>
-    nested
-  </p>
-  <x-b>
-    <input placeholder="in body">
-    <x-b id="innerXB">
-      <input placeholder="in body">
-    </x-b>
-  </x-b>
-
-  <p>
-    with x-trap-focus
-  </p>
-  <x-b>
-    <input placeholder="in body">
-    <x-trap-focus id="nested-in-xb">
-      <input placeholder="x-trap-focus in body">
-    </x-trap-focus>
-  </x-b>
-
-  <h2>Lots of focusable elements</h2>
-  <script>
-    for (let i = 0; i < 100; i++) {
-      document.body.appendChild(document.createElement('input'));
-    }
-  </script>
-
-  <script src="../../inert/inert.js"></script>
-</body>
-
-</html>
diff --git a/demo/ce.html b/demo/ce.html
new file mode 100644
index 0000000..ddd91e5
--- /dev/null
+++ b/demo/ce.html
@@ -0,0 +1,127 @@
+<!--
+Copyright 2016 Google Inc. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>blockingElements polyfill test page</title>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../blocking-elements.html">
+  <link rel="import" href="logger.html">
+
+  <script>
+    // Dynamic import according to query param ce=v0|v1.
+    const importFiles = ['x-trap-focus.html', 'x-a.html', 'x-b.html'];
+    // Find the version.
+    let version = 'v0';
+    const href = window.location.href;
+    if (href.indexOf('ce=') === -1) {
+      version = !Element.prototype.attachShadow ? 'v0' : 'v1';
+    } else {
+      version = href.indexOf('ce=v1') === -1 ? 'v0' : 'v1';
+    }
+    console.info('Using ShadowDom ' + version);
+    for (var i = 0; i < importFiles.length; i++) {
+      const link = document.createElement('link')
+      link.setAttribute('rel', 'import');
+      link.setAttribute('href', './' + version + '/' + importFiles[i]);
+      document.head.appendChild(link);
+    }
+  </script>
+</head>
+
+<body>
+
+  <input inert placeholder="inert input">
+
+  <x-trap-focus inert>
+    inert x-trap-focus
+  </x-trap-focus>
+
+
+  <h2>x-trap-focus</h2>
+  <x-trap-focus id="simple">
+    <input placeholder="in body">
+  </x-trap-focus>
+
+  <p>
+    nested
+  </p>
+  <x-trap-focus id="nested-outer">
+    <input placeholder="in body">
+    <x-trap-focus id="nested-inner">
+      <input placeholder="in body">
+    </x-trap-focus>
+  </x-trap-focus>
+
+  <h2>x-a</h2>
+  <x-a>
+    <input placeholder="in body">
+  </x-a>
+
+  <p>
+    nested
+  </p>
+  <x-a>
+    <input placeholder="in body">
+    <x-a>
+      <input placeholder="in body">
+    </x-a>
+  </x-a>
+  <p>
+    with x-trap-focus
+  </p>
+  <x-a>
+    <input>
+    <x-trap-focus id="nested-in-xa">
+      <input placeholder="in body">
+    </x-trap-focus>
+  </x-a>
+
+  <h2>x-b</h2>
+  <x-b>
+    <input placeholder="in body">
+  </x-b>
+
+  <p>
+    nested
+  </p>
+  <x-b>
+    <input placeholder="in body">
+    <x-b id="innerXB">
+      <input placeholder="in body">
+    </x-b>
+  </x-b>
+
+  <p>
+    with x-trap-focus
+  </p>
+  <x-b>
+    <input placeholder="in body">
+    <x-trap-focus id="nested-in-xb">
+      <input placeholder="x-trap-focus in body">
+    </x-trap-focus>
+  </x-b>
+
+  <h2>Lots of focusable elements</h2>
+  <script>
+    for (let i = 0; i < 100; i++) {
+      document.body.appendChild(document.createElement('input'));
+    }
+  </script>
+
+  <script src="../../inert/inert.js"></script>
+</body>
+
+</html>
diff --git a/demo/index.html b/demo/index.html
index 19580da..3714cec 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -86,8 +86,8 @@ <h1>blocking elements</h1>
     Check these other demos:
     <ul>
       <li><a href="nytimes.html">lots of content</a></li>
-      <li><a href="ce-v0.html">with Custom Elements (ShadowDom v0)</a></li>
-      <li><a href="ce-v1.html">with Custom Elements (ShadowDom v1)</a></li>
+      <li><a href="ce.html?ce=v0">with Custom Elements (ShadowDom v0)</a></li>
+      <li><a href="ce.html?ce=v1">with Custom Elements (ShadowDom v1)</a></li>
     </ul>
 
   </p>
@@ -103,7 +103,7 @@ <h1>blocking elements</h1>
       }
       var checked = target.checked;
       container.classList[checked ? 'add' : 'remove']('blocking');
-      document.$blockingElements[evt.target.checked ? 'push' : 'remove'](container);
+      document.$blockingElements[checked ? 'push' : 'remove'](container);
     }
   </script>
 
diff --git a/demo/nytimes.html b/demo/nytimes.html
index bcd9a9b..21c94e0 100644
--- a/demo/nytimes.html
+++ b/demo/nytimes.html
@@ -53,7 +53,7 @@ <h1>blocking elements</h1>
       }
       var checked = target.checked;
       container.classList[checked ? 'add' : 'remove']('blocking');
-      document.$blockingElements[evt.target.checked ? 'push' : 'remove'](container);
+      document.$blockingElements[checked ? 'push' : 'remove'](container);
     }
   </script>
 
diff --git a/demo/v0/x-a.html b/demo/v0/x-a.html
new file mode 100644
index 0000000..14277d3
--- /dev/null
+++ b/demo/v0/x-a.html
@@ -0,0 +1,49 @@
+<!--
+Copyright 2016 Google Inc. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<link rel="import" href="x-trap-focus.html">
+
+<template id="x-a">
+  <style>
+    :host {
+      display: block;
+      border: 1px solid orange;
+      padding: 5px;
+      margin: 5px;
+    }
+  </style>
+  <button>x-a</button>
+  <x-trap-focus class="in-x-a">
+    <content id="xa"></content>
+  </x-trap-focus>
+</template>
+
+<script>
+  (function() {
+    'use strict';
+
+    if (!Element.prototype.createShadowRoot) {
+      console.warn('ShadowDom v0 is not supported by this browser.');
+      return;
+    }
+
+    const template = document.currentScript.previousElementSibling;
+
+    class XA extends HTMLElement {
+      connectedCallback() {
+        const clone = document.importNode(template.content, true);
+        this.createShadowRoot().appendChild(clone);
+      }
+    }
+    customElements.define('x-a', XA);
+  })();
+</script>
diff --git a/demo/v0/x-b.html b/demo/v0/x-b.html
new file mode 100644
index 0000000..def3d1d
--- /dev/null
+++ b/demo/v0/x-b.html
@@ -0,0 +1,53 @@
+<!--
+Copyright 2016 Google Inc. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<link rel="import" href="x-a.html">
+<link rel="import" href="x-trap-focus.html">
+
+<template id="x-b">
+  <style>
+    :host {
+      display: block;
+      border: 1px solid red;
+      padding: 5px;
+      margin: 5px;
+    }
+  </style>
+  <button>x-b</button>
+  <x-trap-focus class="in-x-b">
+    <x-a class="in-x-b">
+      <button>in x-b</button>
+      <content id="xb"></content>
+    </x-a>
+  </x-trap-focus>
+</template>
+
+<script>
+  (function() {
+    'use strict';
+
+    if (!Element.prototype.createShadowRoot) {
+      console.warn('ShadowDom v0 is not supported by this browser.');
+      return;
+    }
+
+    const template = document.currentScript.previousElementSibling;
+
+    class XB extends HTMLElement {
+      connectedCallback() {
+        const clone = document.importNode(template.content, true);
+        this.createShadowRoot().appendChild(clone);
+      }
+    }
+    customElements.define('x-b', XB);
+  })();
+</script>
diff --git a/demo/v0/x-trap-focus.html b/demo/v0/x-trap-focus.html
new file mode 100644
index 0000000..b960398
--- /dev/null
+++ b/demo/v0/x-trap-focus.html
@@ -0,0 +1,64 @@
+<!--
+Copyright 2016 Google Inc. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<link rel="import" href="../../blocking-elements.html">
+
+<template id="x-trap-focus">
+  <style>
+    :host {
+      display: block;
+      border: 1px solid lightgray;
+      padding: 5px;
+      margin: 5px;
+    }
+
+    :host(.blocking) {
+      outline: 9999px solid rgba(0, 0, 0, 0.5);
+    }
+
+    label {
+      display: block;
+      margin-bottom: 5px;
+    }
+  </style>
+  <label>
+    <input id="toggle" type="checkbox"> Make blocking element
+  </label>
+  <content id="xtrapfocus"></content>
+</template>
+
+<script>
+  (function() {
+    'use strict';
+
+    if (!Element.prototype.createShadowRoot) {
+      console.warn('ShadowDom v0 is not supported by this browser.');
+      return;
+    }
+
+    const template = document.currentScript.previousElementSibling;
+
+    class XTrapFocus extends HTMLElement {
+      connectedCallback() {
+        const clone = document.importNode(template.content, true);
+        clone.querySelector('#toggle').addEventListener('change', this._toggleTrap.bind(this));
+        this.createShadowRoot().appendChild(clone);
+      }
+
+      _toggleTrap(evt) {
+        this.classList[evt.target.checked ? 'add' : 'remove']('blocking');
+        document.$blockingElements[evt.target.checked ? 'push' : 'remove'](this);
+      }
+    }
+    customElements.define('x-trap-focus', XTrapFocus);
+  })();
+</script>
diff --git a/demo/v1/x-a.html b/demo/v1/x-a.html
new file mode 100644
index 0000000..7839fe7
--- /dev/null
+++ b/demo/v1/x-a.html
@@ -0,0 +1,51 @@
+<!--
+Copyright 2016 Google Inc. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<link rel="import" href="x-trap-focus.html">
+
+<template id="x-a">
+  <style>
+    :host {
+      display: block;
+      border: 1px solid orange;
+      padding: 5px;
+      margin: 5px;
+    }
+  </style>
+  <button>x-a</button>
+  <x-trap-focus class="in-x-a">
+    <slot id="xa"></slot>
+  </x-trap-focus>
+</template>
+
+<script>
+  (function() {
+    'use strict';
+
+    if (!Element.prototype.attachShadow) {
+      console.warn('ShadowDom v1 is not supported by this browser.');
+      return;
+    }
+
+    const template = document.currentScript.previousElementSibling;
+
+    class XA extends HTMLElement {
+      connectedCallback() {
+        const clone = document.importNode(template.content, true);
+        this.attachShadow({
+          mode: 'open'
+        }).appendChild(clone);
+      }
+    }
+    customElements.define('x-a', XA);
+  })();
+</script>
diff --git a/demo/v1/x-b.html b/demo/v1/x-b.html
new file mode 100644
index 0000000..bcca9a6
--- /dev/null
+++ b/demo/v1/x-b.html
@@ -0,0 +1,55 @@
+<!--
+Copyright 2016 Google Inc. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<link rel="import" href="x-a.html">
+<link rel="import" href="x-trap-focus.html">
+
+<template id="x-b">
+  <style>
+    :host {
+      display: block;
+      border: 1px solid red;
+      padding: 5px;
+      margin: 5px;
+    }
+  </style>
+  <button>x-b</button>
+  <x-trap-focus class="in-x-b">
+    <x-a class="in-x-b">
+      <button>in x-b</button>
+      <slot id="xb"></slot>
+    </x-a>
+  </x-trap-focus>
+</template>
+
+<script>
+  (function() {
+    'use strict';
+
+    if (!Element.prototype.attachShadow) {
+      console.warn('ShadowDom v1 is not supported by this browser.');
+      return;
+    }
+
+    const template = document.currentScript.previousElementSibling;
+
+    class XB extends HTMLElement {
+      connectedCallback() {
+        const clone = document.importNode(template.content, true);
+        this.attachShadow({
+          mode: 'open'
+        }).appendChild(clone);
+      }
+    }
+    customElements.define('x-b', XB);
+  })();
+</script>
diff --git a/demo/v1/x-trap-focus.html b/demo/v1/x-trap-focus.html
new file mode 100644
index 0000000..c8ca015
--- /dev/null
+++ b/demo/v1/x-trap-focus.html
@@ -0,0 +1,66 @@
+<!--
+Copyright 2016 Google Inc. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<link rel="import" href="../../blocking-elements.html">
+
+<template id="x-trap-focus">
+  <style>
+    :host {
+      display: block;
+      border: 1px solid lightgray;
+      padding: 5px;
+      margin: 5px;
+    }
+
+    :host(.blocking) {
+      outline: 9999px solid rgba(0, 0, 0, 0.5);
+    }
+
+    label {
+      display: block;
+      margin-bottom: 5px;
+    }
+  </style>
+  <label>
+    <input id="toggle" type="checkbox"> Make blocking element
+  </label>
+  <slot id="xtrapfocus"></slot>
+</template>
+
+<script>
+  (function() {
+    'use strict';
+
+    if (!Element.prototype.attachShadow) {
+      console.warn('ShadowDom v1 is not supported by this browser.');
+      return;
+    }
+
+    const template = document.currentScript.previousElementSibling;
+
+    class XTrapFocus extends HTMLElement {
+      connectedCallback() {
+        const clone = document.importNode(template.content, true);
+        clone.querySelector('#toggle').addEventListener('change', this._toggleTrap.bind(this));
+        this.attachShadow({
+          mode: 'open'
+        }).appendChild(clone);
+      }
+
+      _toggleTrap(evt) {
+        this.classList[evt.target.checked ? 'add' : 'remove']('blocking');
+        document.$blockingElements[evt.target.checked ? 'push' : 'remove'](this);
+      }
+    }
+    customElements.define('x-trap-focus', XTrapFocus);
+  })();
+</script>
