Skip to content

Latest commit

 

History

History
182 lines (144 loc) · 13.5 KB

README.md

File metadata and controls

182 lines (144 loc) · 13.5 KB
Raw

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

web.dev

MDN

CSS Tricks

javascript.info

dev.to

Medium

Misc (Tools, guides, etc)

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.