diff --git a/template/partials/codeTemplate.hbs b/template/partials/codeTemplate.hbs
new file mode 100644
index 0000000..d70ffb8
--- /dev/null
+++ b/template/partials/codeTemplate.hbs
@@ -0,0 +1,6 @@
+{{#if example}}
+<template id="{{id}}-example-template">{{{example.description}}}</template>
+{{/if}}
+{{#children}}
+{{~> codeTemplate}}
+{{/children}}
\ No newline at end of file
diff --git a/template/partials/section.hbs b/template/partials/section.hbs
index 70d9959..5d35a75 100644
--- a/template/partials/section.hbs
+++ b/template/partials/section.hbs
@@ -1,7 +1,7 @@
 <div class="livingcss__section-description">{{{description}}}</div>
 
 {{#if example}}
-<livingcss-example>{{{example.description}}}</livingcss-example>
+<livingcss-example example="{{id}}"></livingcss-example>
 {{/if}}
 
 {{#if code}}
diff --git a/template/template.hbs b/template/template.hbs
index 9e9c72d..01a9ae1 100644
--- a/template/template.hbs
+++ b/template/template.hbs
@@ -12,16 +12,51 @@
   <link rel="stylesheet" href="{{this}}">
   {{/each}}
   <!-- /user styles -->
-
-  <script src="https://cdn.jsdelivr.net/webcomponentsjs/0.7.24/webcomponents.min.js"></script>
 </head>
 <body class="livingcss">
   <!-- webcomponent -->
   <!--
-    inlining polymer makes this section really long, but inlining it prevents FOUC and
-    makes all examples the correct size when created for determining scroll positions
+    inlining web components prevents FOUC and makes all examples the correct
+    size when created for determining scroll positions
    -->
-  {{> polymer}}
+  <template id="livingcss-example-template">
+    <style>
+    :host {
+      display: block;
+    }
+
+    {{#each parsedStylesheets}}
+    {{{this}}}
+
+    {{/each}}
+    </style>
+  </template>
+
+  {{#each sections}}
+  {{~> codeTemplate }}
+  {{/each}}
+
+  <script>
+  class LivingCSSExample extends HTMLElement {
+    constructor() {
+      super();
+
+      const template = document.getElementById('livingcss-example-template');
+      const shadowRoot = this.attachShadow({mode: 'open'});
+      shadowRoot.appendChild(template.content.cloneNode(true));
+
+      this._shadowRoot = shadowRoot;
+    }
+
+    connectedCallback() {
+      const example = this.getAttribute('example');
+      const template = document.getElementById(`${example}-example-template`);
+      this._shadowRoot.appendChild(template.content.cloneNode(true));
+    }
+  }
+
+  customElements.define('livingcss-example', LivingCSSExample);
+  </script>
   <!-- /webcomponent -->
 
   <div class="livingcss__wrapper">
