Custom Elements

A list of my Custom Elements (Web Components) and some useful links with related material.

Components

<a-tab-group>

A custom element to create a group of tabs and tab panels.
repository • npm • demo

<capture-photo>

A custom element to capture a photo in the browser implementing the MediaDevices.getUserMedia() of the MediaDevices interface.
repository • npm • demo

<clipboard-copy>

A custom element that implements the Clipboard API to copy text content from elements or input values to the clipboard.
repository • npm • demo

<eye-dropper>

A custom element that implements the EyeDropper API that allows the user to select colors from the screen.
repository • npm • demo

<files-dropzone>

A custom element that creates a drag and drop zone for files.
repository • npm • demo

<lorem-ipsum>

A custom element that generates "Lorem Ipsum" placeholder text.
repository • npm • demo

<modal-element>

A custom element to create a modal, using the native <dialog> element under the hood.
repository • npm • demo

<mutation-observer>

A custom element that offers a declarative interface to the MutationObserver API.
repository • npm • demo

<picture-in-picture>

A custom element that offers a declarative interface to the Picture-in-Picture API.
repository • npm • demo

<resize-observer>

A custom element that offers a declarative interface to the ResizeObserver API.
repository • npm • demo

<scroll-top>

A custom element that scrolls to the top of the page using the IntersectionObserver API.
repository • npm • demo

<skeleton-placeholder>

A custom element that acts as a placeholder to indicate that some content will eventually be rendered.
repository • npm • demo

<theme-toggle>

A custom element that allows you to toggle between light, dark and system theme.
repository • npm • demo

<web-share>

A custom element that implements the Web Share API to share user-defined data.
repository • npm • demo

Learning material

Specs

• Custom elements

web.dev

• Custom Elements v1 - Reusable Web Components
• Shadow DOM v1 - Self-Contained Web Components
• Custom Element Best Practices
• Declarative Shadow DOM
• HTML's New Template Tag
• Constructable Stylesheets

MDN

• Web Components
• Using custom elements
• Using shadow DOM
• Using templates and slots
• CustomElementRegistry
• HTMLSlotElement
• HTMLTemplateElement
• ShadowRoot
• ElementInternals

CSS Tricks

• Web Components Are Easier Than You Think
• Interactive Web Components Are Easier Than You Think
• Using Web Components in WordPress is Easier Than You Think
• Supercharging Built-In Elements With Web Components is Easier Than You Think
• Context-Aware Web Components Are Easier Than You Think
• Web Component Pseudo-Classes and Pseudo-Elements are Easier Than You Think

javascript.info

• From the orbital height
• Custom elements
• Shadow DOM
• Template element
• Shadow DOM slots, composition
• Shadow DOM styling
• Shadow DOM and events

dev.to

• Custom Forms with Web Components and "ElementInternals

Medium

• About Web Components

Misc (Tools, guides, etc)

• awesome-web-components
• Modern Web
• Custom Elements Manifest
• web-component-analyzer
• CEM Tools
• Open Web Components
• webcomponents.org
• Web Components Today

Third party components

Design systems

• shoelace - A forward-thinking library of web components
• Carbon Design System - IBM’s open source design system
• Fluent UI - Microsoft's Fluent UI Web Components
• Lion - Fundamental white label web components for building your design system
• Vaadin - Vaadin Web Components
• Material - The official web component set for Material 3

Standalone components

• details-utils - Add enhancements to details elements.
• html-include - Easily include external HTML into your pages.
• seven-minute-tabs - Tabs web component.
• video-radio-star - A lightweight web component helper for HTML5 videos.
• github-elements - GitHub's Web Component collection.
• howto-components - A collection of web components for educational purposes with a special focus on accessibility, performance and progressive enhancement.
• two-up - A web component to compare two DOM elements.
• pinch-zoom - A web component for pinch zooming DOM elements.
• dark-mode-toggle - A custom element that allows you to easily put a Dark Mode toggle or switch on your site.
• rhino-editor - To create a grab and go WYSIWYG editing experience that can hook into Ruby on Rails ActionText backend.
• emoji-picker-element - A lightweight emoji picker, distributed as a web component.
• codemirror-elements - A set of CodeMirror custom HTML elements.
• table-show - A small web component for responsive <table> elements.
• browser-window - A small themed zero-dependency Web Component for demos with a fake browser window (Safari-esque).
• squirm-inal - The squirminal is a fake antique terminal web component.
• last-icon - An icon library using custom elements.
• ppp-price - A small structural-only zero-dependency Web Component to show Parity Purchasing Power normalized prices.
• sparkly-text - A small zero-dependency Web Component to add sparkles to text fragments.
• dia-date-picker - A lightweight framework agnostic date picker and calendar component.
• is-land - A framework independent partial hydration islands architecture implementation.
• img-comparison-slider - A slider component for comparing images.
• image-compare - A web component for comparing two images using a slider.
• qr-code - A customizable, animate-able, SVG-based QR code custom element.
• snow-fall - A web component to add snow to your web site (or to an element on your web site).
• click-spark - A web component that adds a little spark to your clicks.
• carouscroll - A web component to add next/previous buttons to a horizontal scrollable container.
• hypercard - Web component to add a three-dimensional hover effect to a card.
• Cally - Small, feature-rich of calendar components.
• link-peek - A Web Component to unfurl regular links into rich previews.
• wired-elements - Collection of custom elements that appear hand drawn.
• code-pen - A Web Component for opening code blocks in CodePen.
• light-pen - A lightweight codepen implementation using web components.
• playground-elements - A set of components for creating interactive editable coding environments on the web.
• i-html - A web component that allows for dynamically importing html inline.
• inspector-elements - Web components for visually inspecting objects.
• model-viewer - Display interactive 3D models on the web and in AR.
• stacked-alpha-video - A web component for rendering video with transparency, efficiently.
• code-bubble - A web component that provides inline code examples that link out to StackBlitz sandboxes.
• pie-chart - Custom elements to draw pie charts.
• baseline-status - A widget displaying Baseline status of a web feature based on https://github.com/web-platform-dx/web-features data.
• audio-recorder - Audio Recorder Web Component.
• form-element-mixin - Mixin to associate a Custom Element with forms.
• custom-element - A base class for Web Components (Custom Elements) which provides simple data binding.
• form-participation - Helper, mixins, tools, and more for supporting your custom elements in participating in an ancestor form.
• pixel-canvas - Custom element that applies a shimmering pixel background on element hover.