Overview

The 11ty Web Component Generator is a tool that allows users to generate web components within a static site using the Eleventy (11ty) static site generator. With this generator, users 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 utilizes the inherent features of Eleventy, such as placing templates and template partials in the _includes folder. By following a specific file structure and utilizing the generator, users can easily create web components with styles and additional scripting.

Features

• Customizable output file type
• Composite files from includes
• Supports templates and template partials in _includes folder
• Generates web components within a Nunjucks (.njk) template

Installation

To install and use the 11ty Web Component Generator, follow these steps:

1. Create the component template file in src/components/[component-name].njk. Make sure to kebab-case the file name.
2. Within \_includes/components/, create the following files:
   • script.js
   • style.css
3. Keep the names of script.js and style.css as they are, as the \_includes/component.njk template relies on these names to include their contents and generate the web component.
4. The final web component will be output within public/components/[component-name].js and can be included in another project by referencing the relative path to the web component script.

Summary

The 11ty Web Component Generator is a powerful tool that enhances the capabilities of the Eleventy static site generator by allowing users to generate web components within their static sites. With its customizable output file type and support for templates and template partials, this generator simplifies the process of creating web components with styles and additional scripting. By following a specific file structure and utilizing the generator, users can easily integrate web components into their projects.