web component

This article is a stub. You can help the IndieWeb wiki by expanding it with relevant information.

A web component is a reusable HTML element defined using the Web Components API, and created & used by IndieWeb community members on their own sites.

MDN documentation: https://developer.mozilla.org/en-US/docs/Web/API/Web_components

IndieWeb Examples

capjamesg

capjamesg has made a few web components on his site.

recommend-firefox: Adds a message that recommends Firefox if the reader is not using Firefox to read the page (https://jamesg.blog/2023/12/12/recommend-firefox/).
commandk.js: A search overlay (https://jamesg.blog/2023/02/13/announcing-commandk-js/).
stories.js: A story layout (https://jamesg.blog/2023/05/21/stories-js/).
Drag and drop list: Allow users to order lists (https://github.com/capjamesg/drag-and-drop-list).
Calendar date: Add a calendar date to your website (https://github.com/capjamesg/calendar-date).

He also uses a web component from Zach Leatherman:

seven-minute-tabs: Add tabs to a web page (https://github.com/zachleat/seven-minute-tabs).

Add yourself

Add yourself here… (see this for more details)

Other Examples

Open Heart Protocol offers a custom element

Tools

https://lit.dev - used by MDN in their new front end. Discussed in MDN blog post:
- 2026-04-09 Leo McArdle: Under the hood of MDN's new frontend

Articles

2023-11-09 Jeremy Keith: HTML web components (archived)