component-name

A Web Component for…

Features

Demo

Examples

General usage example:

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

<component-name></component-name>

Installation

You have a few options (choose one):

1. Install via npm: npm install @terriblemia/component-name
2. Download the source manually from GitHub into your project.
3. Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)

Usage

Make sure you include the <script> in your project (choose one, and update the version number as needed):

<!-- Host yourself -->
<script type="module" src="component-name.js"></script>

<!-- 3rd party CDN, not recommended for production use -->
<script
  type="module"
  src="https://www.unpkg.com/@terriblemia/component-name@0.1.0/component-name.js"
></script>

<!-- 3rd party CDN, not recommended for production use -->
<script
  type="module"
  src="https://esm.sh/@terriblemia/component-name@0.1.0"
></script>

Or use the built in WebC component with Eleventy, by adding "npm:@terriblemia/component-name/*.webc" to the Eleventy WebC Plugin components registry:

// Only one module.exports per configuration file, please!
module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(eleventyWebcPlugin, {
    components: [
      // Add as a global WebC component
      "npm:@11ty/component-name/*.webc",
    ],
  });
}

Style hooks

Slots

ToDo

• There's always more to do

Support

At OddBird, we enjoy collaborating and contributing as part of an open web community. But those contributions take time and effort. If you're interested in supporting our open-source work, consider becoming a GitHub sponsor, or contributing to our Open Collective.

❤️ Thanks!

Credit

With thanks to the following people:

• David Darnes for the Web Component repo template that this one is based on.