SSR for Web Components

$ npm i -D wc-compiler

How It Works

WCC let's you author standard custom elements and generate HTML from them using Light or Shadow DOM.

Step 1

Create a custom element

const template = document.createElement('template');

template.innerHTML = `
  <style>
    footer {
      color: #efefef;
      background-color: #192a27;
    }
  </style>

  <footer>
    <h4>My Blog &copy; ${new Date().getFullYear()}</h4>
  </footer>
`;

export default class Footer extends HTMLElement {
  connectedCallback() {
    if (!this.shadowRoot) {
      this.attachShadow({ mode: 'open' });
      this.shadowRoot.appendChild(template.content.cloneNode(true));
    }
  }
}

customElements.define('wcc-footer', Footer);

Step 2

Run it through WCC

import { renderToString } from 'wc-compiler';

const { html } = await renderToString(
  new URL('./path/to/footer.js', import.meta.url)
);

Step 3

Get static HTML 🎉

<wcc-footer>
  <template shadowrootmode="open">
    <style>
      footer {
        color: #efefef;
        background-color: #192a27;
      }
    </style>

    <footer>
      <h4>My Blog &copy; 2026</h4>
    </footer>
  </template>
</wcc-footer>

Capabilities

WCC aims to cover a reasonable set of DOM APIs to help facilitate server-rendering of your Web Components.

Features

In addition to server rendering, WCC also supports these additional features.