diff --git a/packages/cli/package.json b/packages/cli/package.json
index 0722a8162..4ec483e8a 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -53,7 +53,7 @@
     "remark-rehype": "^7.0.0",
     "rollup": "^3.29.4",
     "unified": "^9.2.0",
-    "wc-compiler": "~0.14.0"
+    "wc-compiler": "~0.15.0"
   },
   "devDependencies": {
     "@babel/runtime": "^7.10.4",
diff --git a/packages/cli/test/cases/build.config.prerender-html-web-components/build.config.prerender-html-web-components.spec.js b/packages/cli/test/cases/build.config.prerender-html-web-components/build.config.prerender-html-web-components.spec.js
new file mode 100644
index 000000000..54ce76e2c
--- /dev/null
+++ b/packages/cli/test/cases/build.config.prerender-html-web-components/build.config.prerender-html-web-components.spec.js
@@ -0,0 +1,123 @@
+/*
+ * Use Case
+ * Run Greenwood build command with prerender config set to true and using HTML (Light DOM) Web Components.
+ *
+ * User Result
+ * Should generate a Greenwood build with the expected generated output using custom elements.
+ *
+ * User Command
+ * greenwood build
+ *
+ * User Config
+ * {
+ *   prerender: true
+ * }
+ *
+ * User Workspace
+ *  src/
+ *   components/
+ *     caption.js
+ *     picture-frame.js
+ *   pages/
+ *     index.html
+ */
+import chai from 'chai';
+import { JSDOM } from 'jsdom';
+import path from 'path';
+import { runSmokeTest } from '../../../../../test/smoke-test.js';
+import { getSetupFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
+import { Runner } from 'gallinago';
+import { fileURLToPath, URL } from 'url';
+import fs from 'fs/promises';
+
+const expect = chai.expect;
+
+describe('Build Greenwood With: ', function() {
+  const LABEL = 'Prerender Configuration and HTML (Light DOM) Web Components';
+  const cliPath = path.join(process.cwd(), 'packages/cli/src/index.js');
+  const outputPath = fileURLToPath(new URL('.', import.meta.url));
+  let runner;
+
+  before(function() {
+    this.context = {
+      publicDir: path.join(outputPath, 'public')
+    };
+    runner = new Runner();
+  });
+
+  describe(LABEL, function() {
+
+    before(function() {
+      runner.setup(outputPath, getSetupFiles(outputPath));
+      runner.runCommand(cliPath, 'build');
+    });
+
+    runSmokeTest(['public', 'index'], LABEL);
+
+    describe('Prerendered output for index.html', function() {
+      let dom;
+      let pictureFrame;
+      let expectedHtml;
+      let actualHtml;
+
+      before(async function() {
+        actualHtml = await fs.readFile(new URL('./public/index.html', import.meta.url), 'utf-8');
+        dom = new JSDOM(actualHtml);
+        pictureFrame = dom.window.document.querySelectorAll('wcc-picture-frame');
+        expectedHtml = await fs.readFile(new URL('./expected.html', import.meta.url), 'utf-8');
+      });
+
+      describe(LABEL, function() {
+        it('should not have any <template> tags within the document', function() {
+          expect(dom.window.document.querySelectorAll('template').length).to.equal(0);
+        });
+
+        it('should only have one <wcc-picture-frame> tag', function() {
+          expect(pictureFrame.length).to.equal(1);
+        });
+
+        it('should have the expected image from userland in the HTML', () => {
+          const img = pictureFrame[0].querySelectorAll('.picture-frame img');
+
+          expect(img.length).to.equal(1);
+          expect(img[0].getAttribute('alt')).to.equal('Greenwood logo');
+          expect(img[0].getAttribute('src')).to.equal('https://www.greenwoodjs.io/assets/greenwood-logo-og.png');
+        });
+
+        it('should have the expected Author name <span> from userland in the HTML', () => {
+          const img = pictureFrame[0].querySelectorAll('.picture-frame img + br + span');
+
+          expect(img.length).to.equal(1);
+          expect(img[0].textContent).to.equal('Author: Greenwood');
+        });
+
+        it('should have the expected title attribute content in the nested <wcc-caption> tag', () => {
+          const caption = pictureFrame[0].querySelectorAll('.picture-frame wcc-caption .caption');
+          const heading = caption[0].querySelectorAll('.heading');
+
+          expect(caption.length).to.equal(1);
+          expect(heading.length).to.equal(1);
+          expect(heading[0].textContent).to.equal('Greenwood');
+        });
+
+        it('should have the expected copyright content in the nested <wcc-caption> tag', () => {
+          const caption = pictureFrame[0].querySelectorAll('.picture-frame wcc-caption .caption');
+          const span = caption[0].querySelectorAll('span');
+
+          expect(span.length).to.equal(1);
+          expect(span[0].textContent).to.equal('© 2024');
+        });
+
+        it('should have the expected recursively generated HTML', () => {
+          const body = dom.window.document.querySelector('body');
+
+          expect(expectedHtml.replace(/ /g, '').replace(/\n/g, '')).to.equal(body.innerHTML.replace(/ /g, '').replace(/\n/g, ''));
+        });
+      });
+    });
+  });
+
+  after(async function() {
+    runner.teardown(getOutputTeardownFiles(outputPath));
+  });
+});
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.config.prerender-html-web-components/expected.html b/packages/cli/test/cases/build.config.prerender-html-web-components/expected.html
new file mode 100644
index 000000000..7a23b14a7
--- /dev/null
+++ b/packages/cli/test/cases/build.config.prerender-html-web-components/expected.html
@@ -0,0 +1,13 @@
+<wcc-picture-frame title="Greenwood">
+  <div class="picture-frame">
+    <img src="https://www.greenwoodjs.io/assets/greenwood-logo-og.png" alt="Greenwood logo">
+    <br>
+    <span>Author: <span>Greenwood</span></span>
+    <wcc-caption>
+      <div class="caption">
+        <h6 class="heading">Greenwood</h6>
+        <span>© 2024</span>
+      </div>
+    </wcc-caption>
+  </div>
+</wcc-picture-frame>
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.config.prerender-html-web-components/greenwood.config.js b/packages/cli/test/cases/build.config.prerender-html-web-components/greenwood.config.js
new file mode 100644
index 000000000..8dc4be464
--- /dev/null
+++ b/packages/cli/test/cases/build.config.prerender-html-web-components/greenwood.config.js
@@ -0,0 +1,3 @@
+export default {
+  prerender: true
+};
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.config.prerender-html-web-components/package.json b/packages/cli/test/cases/build.config.prerender-html-web-components/package.json
new file mode 100644
index 000000000..aead43de3
--- /dev/null
+++ b/packages/cli/test/cases/build.config.prerender-html-web-components/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.config.prerender-html-web-components/src/components/caption.js b/packages/cli/test/cases/build.config.prerender-html-web-components/src/components/caption.js
new file mode 100644
index 000000000..5c6cb94ec
--- /dev/null
+++ b/packages/cli/test/cases/build.config.prerender-html-web-components/src/components/caption.js
@@ -0,0 +1,11 @@
+export default class Caption extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+      <div class="caption">
+        ${this.innerHTML}
+      </div>
+    `;
+  }
+}
+
+customElements.define('wcc-caption', Caption);
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.config.prerender-html-web-components/src/components/picture-frame.js b/packages/cli/test/cases/build.config.prerender-html-web-components/src/components/picture-frame.js
new file mode 100644
index 000000000..f152138b0
--- /dev/null
+++ b/packages/cli/test/cases/build.config.prerender-html-web-components/src/components/picture-frame.js
@@ -0,0 +1,19 @@
+import './caption.js';
+
+export default class PictureFrame extends HTMLElement {
+  connectedCallback() {
+    const title = this.getAttribute('title');
+
+    this.innerHTML = `
+      <div class="picture-frame">
+        ${this.innerHTML}
+        <wcc-caption>
+          <h6 class="heading">${title}</h6>
+          <span>&copy; 2024</span>
+        </wcc-caption>
+      </div>
+    `;
+  }
+}
+
+customElements.define('wcc-picture-frame', PictureFrame);
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.config.prerender-html-web-components/src/pages/index.html b/packages/cli/test/cases/build.config.prerender-html-web-components/src/pages/index.html
new file mode 100644
index 000000000..63319fc9b
--- /dev/null
+++ b/packages/cli/test/cases/build.config.prerender-html-web-components/src/pages/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script type="module" src="../components/picture-frame.js"></script>
+  </head>
+
+  <body>
+    <wcc-picture-frame title="Greenwood">
+      <img
+        src="https://www.greenwoodjs.io/assets/greenwood-logo-og.png"
+        alt="Greenwood logo"
+      />
+      <br/>
+      <span>Author: <span>Greenwood</span></span>
+    </wcc-picture-frame>
+  </body>
+</html>
\ No newline at end of file
diff --git a/packages/cli/test/cases/loaders-build.html-web-components/greenwood.config.js b/packages/cli/test/cases/loaders-build.html-web-components/greenwood.config.js
new file mode 100644
index 000000000..8dc4be464
--- /dev/null
+++ b/packages/cli/test/cases/loaders-build.html-web-components/greenwood.config.js
@@ -0,0 +1,3 @@
+export default {
+  prerender: true
+};
\ No newline at end of file
diff --git a/packages/cli/test/cases/loaders-build.html-web-components/loaders-html-webcomponents.spec.js b/packages/cli/test/cases/loaders-build.html-web-components/loaders-html-webcomponents.spec.js
new file mode 100644
index 000000000..42b5f52e6
--- /dev/null
+++ b/packages/cli/test/cases/loaders-build.html-web-components/loaders-html-webcomponents.spec.js
@@ -0,0 +1,92 @@
+/*
+ * Use Case
+ * Run Greenwood and correctly prerender "HTML" Web Components.
+ * https://blog.jim-nielsen.com/2023/html-web-components/
+ *
+ * User Result
+ * Should generate a static Greenwood build with the expected prerender "HTML" Web Components content.
+ *
+ * User Command
+ * greenwood build
+ *
+ * User Config
+ *
+ * {
+ *   prerender: true,
+ * }
+ *
+ * User Workspace
+ * src/
+ *   components/
+ *     picture-frame.js
+*    index.html
+ */
+import chai from 'chai';
+import { JSDOM } from 'jsdom';
+import path from 'path';
+import { runSmokeTest } from '../../../../../test/smoke-test.js';
+import { getSetupFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
+import { Runner } from 'gallinago';
+import { fileURLToPath, URL } from 'url';
+
+const expect = chai.expect;
+
+describe('Build Greenwood With: ', function() {
+  const LABEL = 'Prerendering with HTML Web Components';
+  const cliPath = path.join(process.cwd(), 'packages/cli/src/index.js');
+  const outputPath = fileURLToPath(new URL('.', import.meta.url));
+  let runner;
+
+  before(function() {
+    this.context = {
+      publicDir: path.join(outputPath, 'public')
+    };
+    runner = new Runner(false, true);
+  });
+
+  describe(LABEL, function() {
+    before(function() {
+      runner.setup(outputPath, getSetupFiles(outputPath));
+      runner.runCommand(cliPath, 'build');
+    });
+
+    runSmokeTest(['public'], LABEL);
+
+    describe('Prerender HTML Web Component', function() {
+      let dom;
+      let pictureFrame;
+
+      before(async function() {
+        dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, './index.html'));
+        pictureFrame = dom.window.document.querySelectorAll('app-picture-frame');
+      });
+
+      it('should not have any <template> tags within the document', function() {
+        expect(dom.window.document.querySelectorAll('template').length).to.equal(0);
+      });
+
+      it('should only have one <app-picture-frame> tag', function() {
+        expect(pictureFrame.length).to.equal(1);
+      });
+
+      it('should have the expected title attribute content in the heading of HTML', () => {
+        const heading = pictureFrame[0].querySelectorAll('.picture-frame .heading');
+
+        expect(heading.length).to.equal(1);
+        expect(heading[0].textContent).to.equal('Greenwood');
+      });
+
+      it('should have the expected image from userland in the HTML', () => {
+        const img = pictureFrame[0].querySelectorAll('.picture-frame img');
+
+        expect(img.length).to.equal(1);
+        expect(img[0].getAttribute('alt')).to.equal('Greenwood logo');
+        expect(img[0].getAttribute('src')).to.equal('/assets/greenwood.png');
+      });
+    });
+  });
+
+  after(function() {
+    runner.teardown(getOutputTeardownFiles(outputPath));
+  });
+});
\ No newline at end of file
diff --git a/packages/cli/test/cases/loaders-build.html-web-components/package.json b/packages/cli/test/cases/loaders-build.html-web-components/package.json
new file mode 100644
index 000000000..aead43de3
--- /dev/null
+++ b/packages/cli/test/cases/loaders-build.html-web-components/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}
\ No newline at end of file
diff --git a/packages/cli/test/cases/loaders-build.html-web-components/src/components/picture-frame.js b/packages/cli/test/cases/loaders-build.html-web-components/src/components/picture-frame.js
new file mode 100644
index 000000000..279d5eb6a
--- /dev/null
+++ b/packages/cli/test/cases/loaders-build.html-web-components/src/components/picture-frame.js
@@ -0,0 +1,14 @@
+export default class PictureFrame extends HTMLElement {
+  connectedCallback() {
+    const title = this.getAttribute('title');
+
+    this.innerHTML = `
+      <div class="picture-frame">
+        <h6 class="heading">${title}</h6>
+        ${this.innerHTML}
+      </div>
+    `;
+  }
+}
+
+customElements.define('app-picture-frame', PictureFrame);
\ No newline at end of file
diff --git a/packages/cli/test/cases/loaders-build.html-web-components/src/index.html b/packages/cli/test/cases/loaders-build.html-web-components/src/index.html
new file mode 100644
index 000000000..06f71ee3d
--- /dev/null
+++ b/packages/cli/test/cases/loaders-build.html-web-components/src/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en" prefix="og:http://ogp.me/ns#">
+
+  <head>
+    <script type="module" src="./components/picture-frame.js"></script>
+  </head>
+
+  <body>
+    <app-picture-frame title="Greenwood">
+      <img src="/assets/greenwood.png" alt="Greenwood logo" />
+    </app-picture-frame>
+  </body>
+
+</html>
\ No newline at end of file
diff --git a/packages/cli/test/cases/loaders-build.prerender-import-attributes/loaders-build.prerender-import-attributes.spec.js b/packages/cli/test/cases/loaders-build.prerender-import-attributes/loaders-build.prerender-import-attributes.spec.js
index d55f22718..3436ed023 100644
--- a/packages/cli/test/cases/loaders-build.prerender-import-attributes/loaders-build.prerender-import-attributes.spec.js
+++ b/packages/cli/test/cases/loaders-build.prerender-import-attributes/loaders-build.prerender-import-attributes.spec.js
@@ -9,7 +9,6 @@
  * greenwood build
  *
  * User Config
- * import { greenwoodPluginImportCss } from '@greenwood/plugin-import-css';
  *
  * {
  *   prerender: true,
diff --git a/packages/plugin-import-jsx/package.json b/packages/plugin-import-jsx/package.json
index ccf88da68..19d40c128 100644
--- a/packages/plugin-import-jsx/package.json
+++ b/packages/plugin-import-jsx/package.json
@@ -27,7 +27,7 @@
     "@greenwood/cli": "^0.28.0-alpha.4"
   },
   "dependencies": {
-    "wc-compiler": "~0.14.0"
+    "wc-compiler": "~0.15.0"
   },
   "devDependencies": {
     "@greenwood/cli": "^0.30.0-alpha.6"
diff --git a/yarn.lock b/yarn.lock
index a2132db13..801d8673a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -17174,10 +17174,10 @@ wait-port@1.0.4:
     commander "^9.3.0"
     debug "^4.3.4"
 
-wc-compiler@~0.14.0:
-  version "0.14.0"
-  resolved "https://registry.yarnpkg.com/wc-compiler/-/wc-compiler-0.14.0.tgz#3bf5caf9e0b26b8c3a7b9806bd0d0711bfa371de"
-  integrity sha512-5ouvZ2vDfwKTX9mj6IJWaJSF7239VAb+i8gbFqIyDRMuHqP0Bv9sq9oyZTDAqJM3trEiNWwv3VqI0fW4B8LAtg==
+wc-compiler@~0.15.0:
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/wc-compiler/-/wc-compiler-0.15.0.tgz#f8c0a2b074d39490725718ddf0824ca0ee33ae67"
+  integrity sha512-bzRjWEal5QGKrryZAsD3V9abuQ4blu2LP23GdrIM1UFybDRor6hcRhYJwdBLPriw017x/J69yPuRXLgAm2xUPQ==
   dependencies:
     "@projectevergreen/acorn-jsx-esm" "~0.1.0"
     "@projectevergreen/escodegen-esm" "~0.1.0"