Experimental native Web Components compiler.
npm install wc-compiler





> _Experimental Web Components compiler. It's Web Components all the way down!_ 🐢
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
`
WCC runs on NodeJS and can be installed from npm.
`shell``
$ npm install wc-compiler --save-dev
See our website for API docs and examples.
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.