⚡️ 11ty Web Component Generator

View the demo Hello World component >

Using the Generator

Eleventy (11ty) is a static site generator that makes it possible to mix templating languages. More importantly to this generator is that we can customize the output file type and composite a file from includes.

The web components are generated within a Nunjucks (.njk) template that outputs the final .js file.

This generator works with the inherent features of Eleventy, including that it expects templates and template partials to be placed in _includes.

This leads to the following file structure to create a web component with styles and additional scripting.

First, create the component template file in src/components/[component-name].njk. It is important to kebab-case the file name

Then within _includes/components/ create:

[component-name]/
  script.js
  style.css

Keep the names of script.js and style.css so that the _includes/component.njk template can successfully include their contents to generate the web component.

Using a Generated Web Component

The final web component will be output within public/components/[component-name].js and is ready to be included in another project such as:

<script type="module" src="path/to/component-name.js"></script>
<component-name></component-name>

Display a Component Within This Generator Project

Create additional pages in this project directly within src as Nunjuck (.njk) files and add the following frontmatter in addition to any HTML and Nunjuck template tags.

title: Page Title
component: component-name

Then the page.njk template will use the component value to include the relative path to the web component script.

Project Scripts

• npm start - run Eleventy on localhost with included Browsersync hot-reload
• npm run build - run only Eleventy for creating a production build of the generator project

Web Component Resources

First a little disclaimer - I am brand new to web components, so I know this doesn't cover all the things you may want to do, or the best way to generically composite them. Submit a PR if you want to help extend this generator!

Here are some resources that helped me put together my first web component:

• Encapsulating Style and Structure with Shadow DOM
• Using custom elements
• Creating a Custom Element from Scratch
• Custom Elements v1: Reusable Web Components

11ty Resources

I'm very fond of 11ty, so here's a list of my other resources:

Learn to build an 11ty site in 20 mins with my egghead video course and see how to add a blog and custom data.

Add auto-generated social media images by following my tutorial

Explore advanced setup of custom data through my tutorial on building a community site

For a full-featured starter check out my 11ty Netlify Jumpstart (also works for hosts other than Netlify).

For a featureless Sass starter grab the template for my 11ty Sass Skeleton