11ty Web Component Generator
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
This generator works with the inherent features of Eleventy, including that it expects templates and template partials to be placed in
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
[component-name]/ script.js style.css
Keep the names of
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
page.njk template will use the
component value to include the relative path to the web component script.
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
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