diff --git a/examples/index.html b/examples/index.html
new file mode 100644
index 0000000..5b75358
--- /dev/null
+++ b/examples/index.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>live-region-element</title>
+  </head>
+  <body>
+    <main>
+      <h1>live-region-element</h1>
+      <h2>announce</h2>
+
+      <h3>Polite</h3>
+      <button id="js-announce-polite">Announce politely</button>
+
+      <h3>Assertive</h3>
+      <button id="js-announce-assertive">Announce assertively</button>
+
+      <h2>announceFromElement</h2>
+      <h3>Polite</h3>
+      <p id="some-text">Hello world.</p>
+      <button id="js-announce-el-polite">Announce element politely</button>
+
+      <h3>Assertive</h3>
+      <p id="more-text">Goodbye for now.</p>
+      <button id="js-announce-el-assertive">Announce element assertively</button>
+
+      <live-region>
+        <template shadowrootmode="open">
+          <style>
+            :host {
+              clip-path: inset(50%);
+              height: 1px;
+              overflow: hidden;
+              position: absolute;
+              white-space: nowrap;
+              width: 1px;
+            }
+          </style>
+          <div id="polite" aria-live="polite" aria-atomic="true"></div>
+          <div id="assertive" aria-live="assertive" aria-atomic="true"></div>
+        </template>
+      </live-region>
+    </main>
+
+    <script type="module" src="../dist/esm/index.js"></script>
+    <script>
+      document.getElementById('js-announce-polite').addEventListener('click', () => {
+        const liveRegion = document.querySelector('live-region')
+        liveRegion.announce('Example polite message', {
+          politeness: 'polite',
+        })
+      })
+
+      document.getElementById('js-announce-assertive').addEventListener('click', () => {
+        const liveRegion = document.querySelector('live-region')
+        liveRegion.announce('Example assertive message', {
+          politeness: 'assertive',
+        })
+      })
+
+      document.getElementById('js-announce-el-polite').addEventListener('click', () => {
+        const liveRegion = document.querySelector('live-region')
+        liveRegion.announceFromElement(document.querySelector('#some-text'), {
+          politeness: 'polite',
+        })
+      })
+
+      document.getElementById('js-announce-el-assertive').addEventListener('click', () => {
+        const liveRegion = document.querySelector('live-region')
+        liveRegion.announceFromElement(document.querySelector('#more-text'), {
+          politeness: 'assertive',
+        })
+      })
+    </script>
+
+  </body>
+</html>
diff --git a/src/live-region-element.ts b/src/live-region-element.ts
index 0062d53..5085868 100644
--- a/src/live-region-element.ts
+++ b/src/live-region-element.ts
@@ -83,5 +83,16 @@ function getTemplate() {
   return template
 }
 
+declare global {
+  interface Window {
+    LiveRegionElement: typeof LiveRegionElement
+  }
+}
+
+if (!window.customElements.get('live-region')) {
+  window.LiveRegionElement = LiveRegionElement
+  window.customElements.define('live-region', LiveRegionElement)
+}
+
 export {LiveRegionElement, templateContent}
 export type {AnnounceOptions}
