Made by Stephanie Eckles - @5t3ph
Fork on GitHubDemo Component: Hello World
This very basic component will display a "Hello World" banner 1 second after load.
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>
Fork on GitHub
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-reloadnpm 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