11ty Web Component Generator

screenshot of 11ty Web Component Generator
eleventy

11ty Web Component Generator

Use the power of 11ty to generate web components (custom elements).

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
eleventy
Eleventy

11ty is a static site generator that allows developers to build fast, modern websites using HTML, Markdown, and other templating languages, without the need for a complex build system.

web-components
Web Components

Web components provide a way to create reusable, encapsulated UI components using standard web technologies such as HTML, CSS, and JavaScript. They allow developers to create complex UI components that can be easily shared across multiple projects and frameworks. Web components are built using four main specifications: Custom Elements, Shadow DOM, HTML Templates, and ES Modules.