eleventy-plugin-wcc

eleventy-plugin-wcc

Overview

Eleventy plugin for rendering native Web Components using Web Components Compiler (WCC).

A starter kit for 11ty + WCC is also available.

Installation

Install from NPM.

$ npm install eleventy-plugin-wcc --save-dev

Configuration

Add the plugin to your eleventy.js config and provide a URL for all top level custom element definitions you use.

const path = require('path');
const { pathToFileURL } = require('url');
const wccPlugin = require('./src/index');

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(wccPlugin, {
    definitions: [
      pathToFileURL(path.join(__dirname, './src/js/my-element.js'))
    ]
  });
};

Usage

1. Create a Custom Element

Write a custom element like below. In this case, we are using Declarative Shadow DOM.

// src/js/greeting.js
const template = document.createElement('template');

template.innerHTML = `
  <p>Hello from the greeting component!</p>
`;

class GreetingComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  async connectedCallback() {
    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }
}

module.exports = GreetingComponent; // using module.exports!

customElements.define('x-greeting', GreetingComponent);

Note: Since Eleventy does not support ESM yet, you will need to use module.exports = XXX instead of export default XXX for your definitions.

2. Update Configuration

Add your custom element paths to your .eleventy.js config

const path = require('path');
const { pathToFileURL } = require('url');
const wccPlugin = require('eleventy-plugin-wcc');

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(wccPlugin, {
    definitions: [
      pathToFileURL(path.join(__dirname, './src/js/greeting.js'))
    ]
  });
};

3. Use It!

Now in your content or layouts, use the custom element.

<!-- src/index.md -->
# Hello From 11ty + WCC! 👋

<x-greeting></x-greeting>

Now if you run eleventy, you should get an index.html in your site/ directory with the custom element content pre-rendered! 🎈

<h2>Hello From 11ty + WCC!</h2>
<p>
  <x-greeting>
    <template shadowroot="open">
      <p>Hello from the greeting component!</p>
    </template>
  </x-greeting>
</p>

Options

Coming soon!

Please follow along in our issue tracker or make a suggestion!