Web Components Compiler (WCC)

![NodeJS compatibility](https://nodejs.org/en/about/previous-releases")

> _Experimental Web Components compiler. It's Web Components all the way down!_ 🐢

How It Works

1. Write a Web Component

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

template.innerHTML =

;

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

export default Footer;

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

1. Run it through the compiler

`js
import { renderToString } from 'wc-compiler';

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

1. Get HTML!

`html



`

Installation

WCC runs on NodeJS and can be installed from npm.

`shell
$ npm install wc-compiler --save-dev
``

Documentation

See our website for API docs and examples.

Motivation

WCC is not a static site generator, framework or bundler. It is designed with the intent of being able to produce raw HTML from standards compliant Web Components and easily integrated _into_ a site generator or framework, like Greenwood. The Project Evergreen team also maintains similar integrations for Eleventy and Astro.

In addition, WCC hopes to provide a surface area to explore patterns around streaming, serverless and edge rendering, and acting as a test bed for the Web Components Community Groups's discussions around community protocols, like hydration.