diff --git a/packages/cli/package.json b/packages/cli/package.json
index acaafa2c4..216057b34 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -55,7 +55,8 @@
     "remark-rehype": "^7.0.0",
     "rollup": "^2.58.0",
     "rollup-plugin-terser": "^7.0.0",
-    "unified": "^9.2.0"
+    "unified": "^9.2.0",
+    "wc-compiler": "~0.3.1"
   },
   "devDependencies": {
     "@babel/runtime": "^7.10.4",
diff --git a/packages/cli/src/lib/ssr-route-worker.js b/packages/cli/src/lib/ssr-route-worker.js
index 9f859575b..3a30e0b8b 100644
--- a/packages/cli/src/lib/ssr-route-worker.js
+++ b/packages/cli/src/lib/ssr-route-worker.js
@@ -1,9 +1,12 @@
 // https://github.com/nodejs/modules/issues/307#issuecomment-858729422
 import { pathToFileURL } from 'url';
 import { workerData, parentPort } from 'worker_threads';
+import { renderToString } from 'wc-compiler';
 
 async function executeRouteModule({ modulePath, compilation, route, label, id }) {
-  const { getTemplate = null, getBody = null, getFrontmatter = null } = await import(pathToFileURL(modulePath)).then(module => module);
+  const moduleURL = pathToFileURL(modulePath);
+  const module = await import(moduleURL).then(module => module);
+  const { getFrontmatter = null, getBody = null, getTemplate = null } = module;
   const parsedCompilation = JSON.parse(compilation);
   const data = {
     template: null,
@@ -11,16 +14,22 @@ async function executeRouteModule({ modulePath, compilation, route, label, id })
     frontmatter: null
   };
 
+  if (getFrontmatter) {
+    data.frontmatter = await getFrontmatter(parsedCompilation, route, label, id);
+  }
+
   if (getTemplate) {
     data.template = await getTemplate(parsedCompilation, route);
   }
 
-  if (getBody) {
-    data.body = await getBody(parsedCompilation, route);
-  }
+  if (module.default) {
+    const { html } = await renderToString(moduleURL);
 
-  if (getFrontmatter) {
-    data.frontmatter = await getFrontmatter(parsedCompilation, route, label, id);
+    data.body = html;
+  } else {
+    if (getBody) {
+      data.body = await getBody(parsedCompilation, route);
+    }
   }
 
   parentPort.postMessage(data);
diff --git a/packages/cli/src/lifecycles/bundle.js b/packages/cli/src/lifecycles/bundle.js
index 3326d9df2..4b4229b86 100644
--- a/packages/cli/src/lifecycles/bundle.js
+++ b/packages/cli/src/lifecycles/bundle.js
@@ -5,11 +5,12 @@ const bundleCompilation = async (compilation) => {
 
   return new Promise(async (resolve, reject) => {
     try {
-      compilation.graph = compilation.graph.filter(page => !page.isSSR);
-
       // https://rollupjs.org/guide/en/#differences-to-the-javascript-api
       if (compilation.graph.length > 0) {
-        const rollupConfigs = await getRollupConfig(compilation);
+        const rollupConfigs = await getRollupConfig({
+          ...compilation,
+          graph: compilation.graph.filter(page => !page.isSSR)
+        });
         const bundle = await rollup(rollupConfigs[0]);
 
         await bundle.write(rollupConfigs[0].output);
diff --git a/packages/cli/src/lifecycles/serve.js b/packages/cli/src/lifecycles/serve.js
index bf3e42528..9964c0a39 100644
--- a/packages/cli/src/lifecycles/serve.js
+++ b/packages/cli/src/lifecycles/serve.js
@@ -314,9 +314,10 @@ async function getHybridServer(compilation) {
       await fs.promises.mkdir(path.join(compilation.context.scratchDir, url), { recursive: true });
       await fs.promises.writeFile(path.join(compilation.context.scratchDir, url, 'index.html'), body);
 
-      compilation.graph = compilation.graph.filter(page => page.isSSR && page.route === url);
-
-      const rollupConfigs = await getRollupConfig(compilation);
+      const rollupConfigs = await getRollupConfig({
+        ...compilation,
+        graph: [matchingRoute]
+      });
       const bundle = await rollup(rollupConfigs[0]);
       await bundle.write(rollupConfigs[0].output);
 
diff --git a/packages/cli/src/plugins/renderer/plugin-renderer-string.js b/packages/cli/src/plugins/renderer/plugin-renderer-default.js
similarity index 54%
rename from packages/cli/src/plugins/renderer/plugin-renderer-string.js
rename to packages/cli/src/plugins/renderer/plugin-renderer-default.js
index df120d32a..16203beb9 100644
--- a/packages/cli/src/plugins/renderer/plugin-renderer-string.js
+++ b/packages/cli/src/plugins/renderer/plugin-renderer-default.js
@@ -1,6 +1,6 @@
-const greenwoodPluginRendererString = {
+const greenwoodPluginRendererDefault = {
   type: 'renderer',
-  name: 'plugin-renderer-string',
+  name: 'plugin-renderer-default',
   provider: () => {
     return {
       workerUrl: new URL('../../lib/ssr-route-worker.js', import.meta.url)
@@ -8,4 +8,4 @@ const greenwoodPluginRendererString = {
   }
 };
 
-export { greenwoodPluginRendererString };
\ No newline at end of file
+export { greenwoodPluginRendererDefault };
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.default.ssr/build.default.ssr.spec.js b/packages/cli/test/cases/build.default.ssr/build.default.ssr.spec.js
index c8adae81a..f1d9f769a 100644
--- a/packages/cli/test/cases/build.default.ssr/build.default.ssr.spec.js
+++ b/packages/cli/test/cases/build.default.ssr/build.default.ssr.spec.js
@@ -17,6 +17,8 @@
  *     footer.js
  *   pages/
  *     artists.js
+ *     index.md
+ *     users.js
  *   templates/
  *     app.html
  */
@@ -24,7 +26,7 @@ import chai from 'chai';
 import fs from 'fs';
 import { JSDOM } from 'jsdom';
 import path from 'path';
-import { getSetupFiles, getDependencyFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
+import { getSetupFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
 import request from 'request';
 import { runSmokeTest } from '../../../../../test/smoke-test.js';
 import { Runner } from 'gallinago';
@@ -49,82 +51,7 @@ describe('Build Greenwood With: ', function() {
   describe(LABEL, function() {
 
     before(async function() {
-      const lit = await getDependencyFiles(
-        `${process.cwd()}/node_modules/lit/*.js`,
-        `${outputPath}/node_modules/lit/`
-      );
-      const litDecorators = await getDependencyFiles(
-        `${process.cwd()}/node_modules/lit/decorators/*.js`,
-        `${outputPath}/node_modules/lit/decorators/`
-      );
-      const litDirectives = await getDependencyFiles(
-        `${process.cwd()}/node_modules/lit/directives/*.js`,
-        `${outputPath}/node_modules/lit/directives/`
-      );
-      const litPackageJson = await getDependencyFiles(
-        `${process.cwd()}/node_modules/lit/package.json`,
-        `${outputPath}/node_modules/lit/`
-      );
-      const litElement = await getDependencyFiles(
-        `${process.cwd()}/node_modules/lit-element/*.js`,
-        `${outputPath}/node_modules/lit-element/`
-      );
-      const litElementPackageJson = await getDependencyFiles(
-        `${process.cwd()}/node_modules/lit-element/package.json`,
-        `${outputPath}/node_modules/lit-element/`
-      );
-      const litElementDecorators = await getDependencyFiles(
-        `${process.cwd()}/node_modules/lit-element/decorators/*.js`,
-        `${outputPath}/node_modules/lit-element/decorators/`
-      );
-      const litHtml = await getDependencyFiles(
-        `${process.cwd()}/node_modules/lit-html/*.js`,
-        `${outputPath}/node_modules/lit-html/`
-      );
-      const litHtmlPackageJson = await getDependencyFiles(
-        `${process.cwd()}/node_modules/lit-html/package.json`,
-        `${outputPath}/node_modules/lit-html/`
-      );
-      const litHtmlDirectives = await getDependencyFiles(
-        `${process.cwd()}/node_modules/lit-html/directives/*.js`,
-        `${outputPath}/node_modules/lit-html/directives/`
-      );
-      // lit-html has a dependency on this
-      // https://github.com/lit/lit/blob/main/packages/lit-html/package.json#L82
-      const trustedTypes = await getDependencyFiles(
-        `${process.cwd()}/node_modules/@types/trusted-types/package.json`,
-        `${outputPath}/node_modules/@types/trusted-types/`
-      );
-      const litReactiveElement = await getDependencyFiles(
-        `${process.cwd()}/node_modules/@lit/reactive-element/*.js`,
-        `${outputPath}/node_modules/@lit/reactive-element/`
-      );
-      const litReactiveElementDecorators = await getDependencyFiles(
-        `${process.cwd()}/node_modules/@lit/reactive-element/decorators/*.js`,
-        `${outputPath}/node_modules/@lit/reactive-element/decorators/`
-      );
-      const litReactiveElementPackageJson = await getDependencyFiles(
-        `${process.cwd()}/node_modules/@lit/reactive-element/package.json`,
-        `${outputPath}/node_modules/@lit/reactive-element/`
-      );
-
-      await runner.setup(outputPath, [
-        ...getSetupFiles(outputPath),
-        ...lit,
-        ...litPackageJson,
-        ...litDirectives,
-        ...litDecorators,
-        ...litElementPackageJson,
-        ...litElement,
-        ...litElementDecorators,
-        ...litHtmlPackageJson,
-        ...litHtml,
-        ...litHtmlDirectives,
-        ...trustedTypes,
-        ...litReactiveElement,
-        ...litReactiveElementDecorators,
-        ...litReactiveElementPackageJson
-      ]);
+      await runner.setup(outputPath, getSetupFiles(outputPath));
 
       return new Promise(async (resolve) => {
         setTimeout(() => {
@@ -138,12 +65,13 @@ describe('Build Greenwood With: ', function() {
     runSmokeTest(['public', 'index'], LABEL);
 
     let response = {};
-    let dom;
+    let artistsPageDom;
+    let usersPageDom;
     let artistsPageGraphData;
 
     before(async function() {
       const graph = JSON.parse(await fs.promises.readFile(path.join(outputPath, 'public/graph.json'), 'utf-8'));
-
+      
       artistsPageGraphData = graph.filter(page => page.route === '/artists/')[0];
 
       return new Promise((resolve, reject) => {
@@ -154,14 +82,28 @@ describe('Build Greenwood With: ', function() {
 
           response = res;
           response.body = body;
-          dom = new JSDOM(body);
+
+          artistsPageDom = new JSDOM(body);
 
           resolve();
         });
       });
     });
 
-    describe('Serve command with HTML route response', function() {
+    before(async function() {
+      return new Promise((resolve, reject) => {
+        request.get(`${hostname}/users/`, (err, res, body) => {
+          if (err) {
+            reject();
+          }
+          usersPageDom = new JSDOM(body);
+
+          resolve();
+        });
+      });
+    });
+
+    describe('Serve command with HTML route response for page using "get" functions', function() {
 
       it('should return a 200 status', function(done) {
         expect(response.statusCode).to.equal(200);
@@ -179,53 +121,45 @@ describe('Build Greenwood With: ', function() {
       });
 
       it('the response body should be valid HTML from JSDOM', function(done) {
-        expect(dom).to.not.be.undefined;
+        expect(artistsPageDom).to.not.be.undefined;
         done();
       });
 
       it('should have one style tags', function() {
-        const styles = dom.window.document.querySelectorAll('head > style');
+        const styles = artistsPageDom.window.document.querySelectorAll('head > style');
 
         expect(styles.length).to.equal(1);
       });
 
-      it('should have three script tags', function() {
-        const scripts = dom.window.document.querySelectorAll('head > script');
+      it('should have the expected number of <script> tags in the <head>', function() {
+        const scripts = artistsPageDom.window.document.querySelectorAll('head > script');
 
-        expect(scripts.length).to.equal(3);
+        expect(scripts.length).to.equal(2);
       });
 
       it('should have expected SSR content from the non module script tag', function() {
-        const scripts = Array.from(dom.window.document.querySelectorAll('head > script'))
+        const scripts = Array.from(artistsPageDom.window.document.querySelectorAll('head > script'))
           .filter(tag => !tag.getAttribute('type'));
 
         expect(scripts.length).to.equal(1);
         expect(scripts[0].textContent).to.contain('console.log');
       });
 
-      it('should have a bundled script for the footer component', function() {
-        const footerScript = Array.from(dom.window.document.querySelectorAll('head > script[type]'))
-          .filter(script => (/footer.*[a-z0-9].js/).test(script.src));
-
-        expect(footerScript.length).to.be.equal(1);
-        expect(footerScript[0].type).to.be.equal('module');
-      });
-
       it('should have the expected number of table rows of content', function() {
-        const rows = dom.window.document.querySelectorAll('body > table tr');
+        const rows = artistsPageDom.window.document.querySelectorAll('body > table tr');
 
         expect(rows.length).to.equal(11);
       });
 
       it('should have the expected <title> content in the <head>', function() {
-        const title = dom.window.document.querySelectorAll('head > title');
+        const title = artistsPageDom.window.document.querySelectorAll('head > title');
 
         expect(title.length).to.equal(1);
         expect(title[0].textContent).to.equal('/artists/');
       });
 
       it('should have custom metadata in the <head>', function() {
-        const metaDescription = Array.from(dom.window.document.querySelectorAll('head > meta'))
+        const metaDescription = Array.from(artistsPageDom.window.document.querySelectorAll('head > meta'))
           .filter((tag) => tag.getAttribute('name') === 'description');
 
         expect(metaDescription.length).to.equal(1);
@@ -248,13 +182,43 @@ describe('Build Greenwood With: ', function() {
 
       it('should append the expected <script> tag for a frontmatter import <x-counter> component', function() {
         const componentName = 'counter';
-        const counterScript = Array.from(dom.window.document.querySelectorAll('head > script[src]'))
+        const counterScript = Array.from(artistsPageDom.window.document.querySelectorAll('head > script[src]'))
           .filter((tag) => tag.getAttribute('src').indexOf(`/${componentName}.`) === 0);
 
         expect(artistsPageGraphData.imports[0]).to.equal(`/components/${componentName}.js`);
         expect(counterScript.length).to.equal(1);
       });
     });
+
+    describe('Prerender an HTML route response for page exporting an HTMLElement as default export', function() {
+      it('the response body should be valid HTML from JSDOM', function(done) {
+        expect(usersPageDom).to.not.be.undefined;
+        done();
+      });
+
+      it('should have the expected <h1> text in the <body>', function() {
+        const heading = usersPageDom.window.document.querySelectorAll('body > h1');
+        const userLength = parseInt(heading[0].querySelector('span').textContent, 10);
+
+        expect(heading.length).to.be.equal(1);
+        expect(heading[0].textContent).to.contain('List of Users:');
+        expect(userLength).to.greaterThan(0);
+      });
+
+      it('should have the expected number of <wc-card> tags in the <head>', function() {
+        const cards = usersPageDom.window.document.querySelectorAll('body > wc-card template[shadowroot="open"]');
+
+        expect(cards.length).to.be.greaterThan(0);
+      });
+
+      xit('should have a bundled <script> for the card component', function() {
+        const cardScript = Array.from(usersPageDom.window.document.querySelectorAll('head > script[type]'))
+          .filter(script => (/card.*[a-z0-9].js/).test(script.src));
+
+        expect(cardScript.length).to.be.equal(1);
+        expect(cardScript[0].type).to.be.equal('module');
+      });
+    });
   });
 
   after(function() {
diff --git a/packages/cli/test/cases/build.default.ssr/package.json b/packages/cli/test/cases/build.default.ssr/package.json
deleted file mode 100644
index 2dee3e768..000000000
--- a/packages/cli/test/cases/build.default.ssr/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "type": "module",
-  "dependencies": {
-    "lit": "^2.0.0"
-  }
-}
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.default.ssr/src/components/card.js b/packages/cli/test/cases/build.default.ssr/src/components/card.js
new file mode 100644
index 000000000..21456531a
--- /dev/null
+++ b/packages/cli/test/cases/build.default.ssr/src/components/card.js
@@ -0,0 +1,43 @@
+const template = document.createElement('template');
+
+template.innerHTML = `
+  <style>
+    :host {
+      display: block;
+      width: 80%;
+      margin: 50px auto!important;
+      text-align: center;
+    }
+
+    [name="title"] {
+      color: red;
+    }
+
+    ::slotted(img) {
+      max-width: 500px;
+    }
+
+    hr {
+      border-top: 1px solid var(--color-accent);
+    }
+  </style>
+
+  <div class="card">
+    <slot name="title">My default title</slot>
+    <slot name="image"></slot>
+  </div>
+  <hr/>
+`;
+
+class Card extends HTMLElement {
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: 'open' });
+      this.shadowRoot.appendChild(template.content.cloneNode(true));
+    }
+  }
+}
+
+export default Card;
+
+customElements.define('wc-card', Card);
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.default.ssr/src/components/footer.js b/packages/cli/test/cases/build.default.ssr/src/components/footer.js
deleted file mode 100644
index cad38627a..000000000
--- a/packages/cli/test/cases/build.default.ssr/src/components/footer.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import { css, html, LitElement } from 'lit';
-
-class FooterComponent extends LitElement {
-
-  constructor() {
-    super();
-    this.version = '0.11.1';
-  }
-
-  static get styles() {
-    return css`
-      .footer {
-        background-color: #192a27;
-        min-height: 30px;
-        padding-top: 10px;
-      }
-
-      h4 {
-        width: 90%;
-        margin: 0 auto;
-        padding: 0;
-        text-align: center;
-      }
-
-      a {
-        color: white;
-        text-decoration: none;
-      }
-
-      span.separator {
-        color: white;
-      }
-    `;
-  }
-
-  render() {
-    const { version } = this;
-    
-    return html`
-      <footer class="footer">
-        <h4>
-          <a href="/">Greenwood v${version}</a> <span class="separator">&#9672</span> <a href="https://www.netlify.com/">This site is powered by Netlify</a>
-        </h4>
-      </footer>
-    `;
-  }
-}
-
-customElements.define('app-footer', FooterComponent);
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.default.ssr/src/pages/artists.js b/packages/cli/test/cases/build.default.ssr/src/pages/artists.js
index c64a9cac5..229252a54 100644
--- a/packages/cli/test/cases/build.default.ssr/src/pages/artists.js
+++ b/packages/cli/test/cases/build.default.ssr/src/pages/artists.js
@@ -80,8 +80,7 @@ async function getFrontmatter(compilation, route) {
     ],
     data: {
       author: 'Project Evergreen',
-      date: '01-01-2021',
-      prerender: true
+      date: '01-01-2021'
     }
   };
 }
diff --git a/packages/cli/test/cases/build.default.ssr/src/pages/users.js b/packages/cli/test/cases/build.default.ssr/src/pages/users.js
new file mode 100644
index 000000000..f40a25706
--- /dev/null
+++ b/packages/cli/test/cases/build.default.ssr/src/pages/users.js
@@ -0,0 +1,21 @@
+import fetch from 'node-fetch';
+import '../components/card.js';
+
+export default class UsersPage extends HTMLElement {
+  async connectedCallback() {
+    const users = await fetch('https://www.analogstudios.net/api/artists').then(resp => resp.json());
+    const html = users.map(user => {
+      return `
+        <wc-card>
+          <h2 slot="title">${user.name}</h2>
+          <img slot="image" src="${user.imageUrl}" alt="${user.name}"/>
+        </wc-card>
+      `;
+    }).join('');
+
+    this.innerHTML = `
+      <h1>List of Users: <span id="count">${users.length}</span></h1>
+      ${html}
+    `;
+  }
+}
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.default.ssr/src/templates/app.html b/packages/cli/test/cases/build.default.ssr/src/templates/app.html
index 39d0ebbbb..e2bf86028 100644
--- a/packages/cli/test/cases/build.default.ssr/src/templates/app.html
+++ b/packages/cli/test/cases/build.default.ssr/src/templates/app.html
@@ -4,10 +4,8 @@
     <title>Default Title</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <script type="module" src="../components/footer.js"></script>
   </head>
   <body>
     <page-outlet></page-outlet>
-    <app-footer></app-footer>
   </body>
 </html>
\ No newline at end of file
diff --git a/packages/plugin-renderer-lit/README.md b/packages/plugin-renderer-lit/README.md
index b7d085785..011926fd0 100644
--- a/packages/plugin-renderer-lit/README.md
+++ b/packages/plugin-renderer-lit/README.md
@@ -48,51 +48,48 @@ export default {
 }
 ```
 
-Now, you can write some [SSR routes](/docs/server-rendering/) using Lit!  The below example even uses the standard [SimpleGreeting](https://lit.dev/playground/) component from the Lit docs.
+Now, you can write some [SSR routes](/docs/server-rendering/) using Lit including all the [available APIs](docs/server-rendering/#api).  The below example uses the standard [SimpleGreeting](https://lit.dev/playground/) component from the Lit docs by also using a LitElement as the `default export`!
 ```js
-import fetch from 'node-fetch';
-import { html } from 'lit';
-import '../components/greeting.js';
-
-async function getBody() {
-  const artists = await fetch('http://www.mydomain.com/api/artists').then(resp => resp.json());
-
-  return html`
-    <h1>Lit SSR response</h1>
-    <table>
-      <tr>
-        <th>ID</th>
-        <th>Name</th>
-        <th>Description</th>
-        <th>Message</th>
-        <th>Picture</th>
-      </tr>
+import { html, LitElement } from 'lit';
+import './path/to/greeting.js';
+
+export default class ArtistsPage extends LitElement {
+
+  constructor() {
+    super();
+    this.artists = [{ /* ... */ }];
+  }
+
+  render() {
+    const { artists } = this;
+
+    return html`
       ${
         artists.map((artist) => {
-          const { id, name, bio, imageUrl } = artist;
+          const { id, name, imageUrl } = artist;
 
           return html`
-            <tr>
-              <td>${id}</td>
-              <td>${name}</td>
-              <td>${bio}</td>
-              <td>
-                <a href="http://www.mydomain.com/artists/${id}" target="_blank">
-                  <simple-greeting .name="${name}"></simple-greeting>
-                </a>
-              </td>
-              <td><img src="${imageUrl}"/></td>
-            </tr>
+            <a href="/artists/${id}" target="_blank">
+              <simple-greeting .name="${name}"></simple-greeting>
+            </a>
+
+            <img src="${imageUrl}" loading="lazy"/>
+
+            <br/>
           `;
         })
       }
-    </table>
-  `;
+    `;
+  }
 }
 
-export { getBody };
+// for now these are needed for the Lit specific implementations
+customElements.define('artists-page', ArtistsPage);
+export const tagName = 'artists-page';
 ```
 
+> **Note**: _Lit SSR [**only** renders into declarative shadow roots](https://github.com/lit/lit/issues/3080#issuecomment-1165158794) so you will have to keep browser support and polyfill usage in mind depending on your use case_.
+
 ## Options
 
 ### Prerender (experimental)
diff --git a/packages/plugin-renderer-lit/src/ssr-route-worker-lit.js b/packages/plugin-renderer-lit/src/ssr-route-worker-lit.js
index dedd61883..14696f78e 100644
--- a/packages/plugin-renderer-lit/src/ssr-route-worker-lit.js
+++ b/packages/plugin-renderer-lit/src/ssr-route-worker-lit.js
@@ -41,20 +41,28 @@ async function executeRouteModule({ modulePath, compilation, route, label, id, p
 
     data.html = await getTemplateResultString(templateResult);
   } else {
-    const { getTemplate = null, getBody = null, getFrontmatter = null } = await import(pathToFileURL(modulePath)).then(module => module);
+    const module = await import(pathToFileURL(modulePath)).then(module => module);
+    const { getTemplate = null, getBody = null, getFrontmatter = null } = module;
 
-    if (getTemplate) {
-      const templateResult = await getTemplate(parsedCompilation, route);
-
-      data.template = await getTemplateResultString(templateResult);
-    }
+    if (module.default && module.tagName) {
+      const { tagName } = module;
+      const templateResult = html`
+        ${unsafeHTML(`<${tagName}></${tagName}>`)}
+      `;
 
-    if (getBody) {
+      data.body = await getTemplateResultString(templateResult);
+    } else if (getBody) {
       const templateResult = await getBody(parsedCompilation, route);
 
       data.body = await getTemplateResultString(templateResult);
     }
 
+    if (getTemplate) {
+      const templateResult = await getTemplate(parsedCompilation, route);
+
+      data.template = await getTemplateResultString(templateResult);
+    }
+
     if (getFrontmatter) {
       data.frontmatter = await getFrontmatter(parsedCompilation, route, label, id);
     }
diff --git a/packages/plugin-renderer-lit/test/cases/build.default/build.default.spec.js b/packages/plugin-renderer-lit/test/cases/build.default/build.default.spec.js
index 8cd6fdce9..a31503280 100644
--- a/packages/plugin-renderer-lit/test/cases/build.default/build.default.spec.js
+++ b/packages/plugin-renderer-lit/test/cases/build.default/build.default.spec.js
@@ -19,6 +19,7 @@
  *     greeting.js
  *   pages/
  *     artists.js
+ *     users.js
  *   templates/
  *     app.html
  */
@@ -139,6 +140,8 @@ describe('Build Greenwood With: ', function() {
     let response = {};
     let artists = [];
     let dom;
+    let usersPageDom;
+    let usersPageHtml;
     let aboutPageGraphData;
 
     before(async function() {
@@ -157,12 +160,21 @@ describe('Build Greenwood With: ', function() {
           response.body = body;
           dom = new JSDOM(body);
 
-          resolve();
+          request.get(`${hostname}/users/`, (err, res, body) => {
+            if (err) {
+              reject();
+            }
+  
+            usersPageHtml = body;
+            usersPageDom = new JSDOM(body);
+  
+            resolve();
+          });
         });
       });
     });
 
-    describe('Serve command with HTML route response', function() {
+    describe('Serve command with HTML route response using getBody, getTemplate and getFrontmatter', function() {
 
       it('should return a 200 status', function(done) {
         expect(response.statusCode).to.equal(200);
@@ -243,6 +255,25 @@ describe('Build Greenwood With: ', function() {
         expect(aboutPageGraphData.data.date).to.equal('01-01-2021');
       });
     });
+
+    describe('Serve command with HTML route response using LitElement as default export', function() {
+      it('the response body should be valid HTML from JSDOM', function(done) {
+        expect(usersPageDom).to.not.be.undefined;
+        done();
+      });
+
+      it('should have the expected <h1> text in the <body>', function() {
+        expect(usersPageHtml).to.contain('Users Page');
+      });
+
+      it('should have the expected users length text in the <body>', function() {
+        expect(usersPageHtml).to.contain(`<div id="users"><!--lit-part-->${artists.length}<!--/lit-part--></div>`);
+      });
+
+      it('should have the expected <app-footer> content in the <body>', function() {
+        expect(usersPageHtml).to.contain('<footer class="footer">');
+      });
+    });
   });
 
   after(function() {
diff --git a/packages/plugin-renderer-lit/test/cases/build.default/src/pages/users.js b/packages/plugin-renderer-lit/test/cases/build.default/src/pages/users.js
new file mode 100644
index 000000000..f6fe81ebf
--- /dev/null
+++ b/packages/plugin-renderer-lit/test/cases/build.default/src/pages/users.js
@@ -0,0 +1,24 @@
+import fs from 'fs';
+import { html, LitElement } from 'lit';
+import '../components/footer.js';
+
+class UsersComponent extends LitElement {
+
+  constructor() {
+    super();
+    this.users = JSON.parse(fs.readFileSync(new URL('../../artists.json', import.meta.url), 'utf-8'));
+  }
+
+  render() {
+    return html`
+      <h1>Users Page</h1>
+      <div id="users">${this.users.length}</div>
+      <app-footer></app-footer>
+    `;
+  }
+}
+
+customElements.define('app-users', UsersComponent);
+
+export const tagName = 'app-users';
+export default UsersComponent;
\ No newline at end of file
diff --git a/www/components/card/card.native.js b/www/components/card/card.native.js
new file mode 100644
index 000000000..21456531a
--- /dev/null
+++ b/www/components/card/card.native.js
@@ -0,0 +1,43 @@
+const template = document.createElement('template');
+
+template.innerHTML = `
+  <style>
+    :host {
+      display: block;
+      width: 80%;
+      margin: 50px auto!important;
+      text-align: center;
+    }
+
+    [name="title"] {
+      color: red;
+    }
+
+    ::slotted(img) {
+      max-width: 500px;
+    }
+
+    hr {
+      border-top: 1px solid var(--color-accent);
+    }
+  </style>
+
+  <div class="card">
+    <slot name="title">My default title</slot>
+    <slot name="image"></slot>
+  </div>
+  <hr/>
+`;
+
+class Card extends HTMLElement {
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: 'open' });
+      this.shadowRoot.appendChild(template.content.cloneNode(true));
+    }
+  }
+}
+
+export default Card;
+
+customElements.define('wc-card', Card);
\ No newline at end of file
diff --git a/www/pages/artists.js b/www/pages/artists.js
new file mode 100644
index 000000000..0fe8d1bc9
--- /dev/null
+++ b/www/pages/artists.js
@@ -0,0 +1,36 @@
+import '../components/card/card.native.js';
+import fetch from 'node-fetch';
+
+export default class ArtistsPage extends HTMLElement {
+  async connectedCallback() {
+    if (!this.shadowRoot) {
+      const artists = await fetch('https://www.analogstudios.net/api/artists').then(resp => resp.json());
+      const html = artists.map(artist => {
+        return `
+          <wc-card>
+            <h2 slot="title">${artist.name}</h2>
+            <img slot="image" src="${artist.imageUrl}" alt="${artist.name}"/>
+          </wc-card>
+        `;
+      }).join('');
+
+      this.attachShadow({ mode: 'open' });
+      this.shadowRoot.innerHTML = `
+        <template shadowroot="open">
+          ${html}
+        </template>
+      `;
+    }
+  }
+}
+
+async function getFrontmatter() {
+  return {
+    menu: 'navigation',
+    index: 7
+  };
+}
+
+export {
+  getFrontmatter
+};
\ No newline at end of file
diff --git a/www/pages/docs/server-rendering.md b/www/pages/docs/server-rendering.md
index 16d4a2513..d76948fb1 100644
--- a/www/pages/docs/server-rendering.md
+++ b/www/pages/docs/server-rendering.md
@@ -27,7 +27,8 @@ The above would serve content in a browser at `/users/`.
 
 ### API
 
-In your _[page].js_ file, Greenwood supports three functions you can `export` for providing server rendered configuration and content:
+In your _[page].js_ file, Greenwood supports the following functions you can `export` for providing server rendered configuration and content:
+- `default`: Use a custom element to render your page content.  Will take precedence over `getBody`.  Will also automatically track your custom element dependencies, in place of having to define [frontmatter imports](/docs/front-matter/#imports) in `getFrontmatter`.
 - `getFrontmatter`: Static [frontmatter](/docs/front-matter/), useful in conjunction with [menus](/docs/menus/) or otherwise static configuration / meta data.
 - `getBody`: Effectively anything that you could put into a [`<content-outlet></content-outlet>`](/docs/layouts/#page-templates).
 - `getTemplate`: Effectively the same as a [page template](/docs/layouts/#page-templates).
@@ -45,6 +46,11 @@ async function getTemplate(compilation, route) {
   return `/* some HTML here */`;
 }
 
+export default MyComponent extends HTMLElement {
+  constructor() { }
+  connectedCallback() { }
+}
+
 export {
   getFrontmatter,
   getBody,
@@ -52,6 +58,35 @@ export {
 }
 ```
 
+#### Custom Element (default)
+
+When using `export default`, Greenwood supports providing a custom element as the export for your page content.  It uses [**WCC**](https://github.com/ProjectEvergreen/wcc) by default which also includes support for rendering [Declarative Shadow DOM](https://web.dev/declarative-shadow-dom/).
+
+```js
+import fetch from 'node-fetch';
+import '../components/card/card.js';  // <wc-card></wc-card>
+
+export default class UsersPage extends HTMLElement {
+  async connectedCallback() {
+    const users = await fetch('https://www.example.com/api/users').then(resp => resp.json());
+    const html = users.map(user => {
+      return `
+        <wc-card>
+          <h2 slot="title">${user.name}</h2>
+          <img slot="image" src="${user.imageUrl}" alt="${user.name}"/>
+        </wc-card>
+      `;
+    }).join('');
+
+    this.innerHTML = html;
+  }
+}
+```
+
+In the above example, _card.js_ will automatically be bundled for you on the client side!  🙌
+
+> _**Note**: Keep in mind that for these "page" components, you will likely want to _avoid_ Declarative Shadow for rendering the top level (to avoid wrapping static content in `<template>` tags), but definitely use Declarative Shadow DOM within any dependent custom elements of your page._
+
 #### Frontmatter
 
 Any Greenwood supported frontmatter can be returned here.  _This is only run once when the server is started_ to populate the graph, which is helpful if you want your dynamic route to show up in a menu like in your header for navigation.
@@ -154,6 +189,7 @@ async function getTemplate(compilation, route) {
 One of the great things about Greenwood is that you can seamlessly move from completely static to server rendered, without giving up either one! 💯
 
 Given the following workspace of just pages
+
 ```shell
 src/
   pages/
diff --git a/yarn.lock b/yarn.lock
index 982adbee0..f119a21f5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2955,6 +2955,11 @@ acorn-walk@^8.0.0:
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.0.0.tgz#56ae4c0f434a45fff4a125e7ea95fa9c98f67a16"
   integrity sha512-oZRad/3SMOI/pxbbmqyurIx7jHw1wZDcR9G44L8pUVFEomX/0dH89SrM1KaDXuv1NpzAXz6Op/Xu/Qd5XXzdEA==
 
+acorn-walk@^8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.2.0.tgz#741210f2e2426454508853a2f44d0ab83b7f69c1"
+  integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
+
 acorn@^6.0.1, acorn@^6.0.4:
   version "6.4.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.1.tgz#531e58ba3f51b9dacb9a6646ca4debf5b14ca474"
@@ -2970,6 +2975,11 @@ acorn@^8.0.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.0.1.tgz#d7e8eca9b71d5840db0e7e415b3b2b20e250f938"
   integrity sha512-dmKn4pqZ29iQl2Pvze1zTrps2luvls2PBY//neO2WJ0s10B3AxJXshN+Ph7B4GrhfGhHXrl4dnUwyNNXQcnWGQ==
 
+acorn@^8.7.0:
+  version "8.7.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.7.1.tgz#0197122c843d1bf6d0a5e83220a788f278f63c30"
+  integrity sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==
+
 agent-base@4, agent-base@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.3.0.tgz#8165f01c436009bccad0b1d122f05ed770efc6ee"
@@ -12208,6 +12218,15 @@ w3c-xmlserializer@^1.1.2:
     webidl-conversions "^4.0.2"
     xml-name-validator "^3.0.0"
 
+wc-compiler@~0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/wc-compiler/-/wc-compiler-0.3.1.tgz#fedd4249947092ef8d30c41156911a2891c7cef4"
+  integrity sha512-hY72m2EX6WW9k8+kXzrOCxyJetaTRKmGODnW3Ftl2u1d5pOw6mXSZkBI6/5SEw07jbQK/CLs/Tem/SF2PBO0mQ==
+  dependencies:
+    acorn "^8.7.0"
+    acorn-walk "^8.2.0"
+    parse5 "^6.0.1"
+
 wcwidth@^1.0.0, wcwidth@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"