https://github.com/georapbox/custom-elements
A list of my Custom Elements (Web Components) and some useful links with related material.
https://github.com/georapbox/custom-elements
custom-elements web-components
Last synced: about 1 year ago
JSON representation
A list of my Custom Elements (Web Components) and some useful links with related material.
- Host: GitHub
- URL: https://github.com/georapbox/custom-elements
- Owner: georapbox
- Created: 2022-04-13T06:43:48.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-10-05T08:11:30.000Z (over 1 year ago)
- Last Synced: 2024-10-05T12:59:23.135Z (over 1 year ago)
- Topics: custom-elements, web-components
- Homepage:
- Size: 86.9 KB
- Stars: 7
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://github.com/georapbox/a-tab-group) • [npm](https://www.npmjs.com/package/@georapbox/a-tab-group) • [demo](https://georapbox.github.io/a-tab-group/)
### <capture-photo>
A custom element to capture a photo in the browser implementing the `MediaDevices.getUserMedia()` of the MediaDevices interface.
[repository](https://github.com/georapbox/capture-photo-element) • [npm](https://www.npmjs.com/package/@georapbox/capture-photo-element) • [demo](https://georapbox.github.io/capture-photo-element/)
### <clipboard-copy>
A custom element that implements the Clipboard API to copy text content from elements or input values to the clipboard.
[repository](https://github.com/georapbox/clipboard-copy-element) • [npm](https://www.npmjs.com/package/@georapbox/clipboard-copy-element) • [demo](https://georapbox.github.io/clipboard-copy-element/)
### <eye-dropper>
A custom element that implements the EyeDropper API that allows the user to select colors from the screen.
[repository](https://github.com/georapbox/eye-dropper-element) • [npm](https://www.npmjs.com/package/@georapbox/eye-dropper-element) • [demo](https://georapbox.github.io/eye-dropper-element/)
### <files-dropzone>
A custom element that creates a drag and drop zone for files.
[repository](https://github.com/georapbox/files-dropzone-element) • [npm](https://www.npmjs.com/package/@georapbox/files-dropzone-element) • [demo](https://georapbox.github.io/files-dropzone-element/)
### <lorem-ipsum>
A custom element that generates "Lorem Ipsum" placeholder text.
[repository](https://github.com/georapbox/lorem-ipsum-element) • [npm](https://www.npmjs.com/package/@georapbox/lorem-ipsum-element) • [demo](https://georapbox.github.io/lorem-ipsum-element/)
### <modal-element>
A custom element to create a modal, using the native `` element under the hood.
[repository](https://github.com/georapbox/modal-element) • [npm](https://www.npmjs.com/package/@georapbox/modal-element) • [demo](https://georapbox.github.io/modal-element/)
### <mutation-observer>
A custom element that offers a declarative interface to the MutationObserver API.
[repository](https://github.com/georapbox/mutation-observer-element) • [npm](https://www.npmjs.com/package/@georapbox/mutation-observer-element) • [demo](https://georapbox.github.io/mutation-observer-element/)
### <picture-in-picture>
A custom element that offers a declarative interface to the Picture-in-Picture API.
[repository](https://github.com/georapbox/picture-in-picture-element) • [npm](https://www.npmjs.com/package/@georapbox/picture-in-picture-element) • [demo](https://georapbox.github.io/picture-in-picture-element/)
### <resize-observer>
A custom element that offers a declarative interface to the ResizeObserver API.
[repository](https://github.com/georapbox/resize-observer-element) • [npm](https://www.npmjs.com/package/@georapbox/resize-observer-element) • [demo](https://georapbox.github.io/resize-observer-element/)
### <scroll-top>
A custom element that scrolls to the top of the page using the IntersectionObserver API.
[repository](https://github.com/georapbox/scroll-top-element) • [npm](https://www.npmjs.com/package/@georapbox/scroll-top-element) • [demo](https://georapbox.github.io/scroll-top-element/)
### <skeleton-placeholder>
A custom element that acts as a placeholder to indicate that some content will eventually be rendered.
[repository](https://github.com/georapbox/skeleton-placeholder-element) • [npm](https://www.npmjs.com/package/@georapbox/skeleton-placeholder-element) • [demo](https://georapbox.github.io/skeleton-placeholder-element/)
### <theme-toggle>
A custom element that allows you to toggle between light, dark and system theme.
[repository](https://github.com/georapbox/theme-toggle-element) • [npm](https://www.npmjs.com/package/@georapbox/theme-toggle-element) • [demo](https://georapbox.github.io/theme-toggle-element/)
### <web-share>
A custom element that implements the Web Share API to share user-defined data.
[repository](https://github.com/georapbox/web-share-element) • [npm](https://www.npmjs.com/package/@georapbox/web-share-element) • [demo](https://georapbox.github.io/web-share-element/)
## Learning material
### Specs
- [Custom elements](https://html.spec.whatwg.org/multipage/custom-elements.html)
### web.dev
- [Custom Elements v1 - Reusable Web Components](https://web.dev/custom-elements-v1/)
- [Shadow DOM v1 - Self-Contained Web Components](https://web.dev/shadowdom-v1/)
- [Custom Element Best Practices](https://web.dev/custom-elements-best-practices/)
- [Declarative Shadow DOM](https://web.dev/declarative-shadow-dom/)
- [HTML's New Template Tag](https://web.dev/webcomponents-template/)
- [Constructable Stylesheets](https://web.dev/constructable-stylesheets/)
### MDN
- [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)
- [Using custom elements](https://developer.mozilla.org/docs/Web/Web_Components/Using_custom_elements)
- [Using shadow DOM](https://developer.mozilla.org/docs/Web/Web_Components/Using_shadow_DOM)
- [Using templates and slots](https://developer.mozilla.org/docs/Web/Web_Components/Using_templates_and_slots)
- [CustomElementRegistry](https://developer.mozilla.org/docs/Web/API/CustomElementRegistry)
- [HTMLSlotElement](https://developer.mozilla.org/docs/Web/API/HTMLSlotElement)
- [HTMLTemplateElement](https://developer.mozilla.org/docs/Web/API/HTMLTemplateElement)
- [ShadowRoot](https://developer.mozilla.org/docs/Web/API/ShadowRoot)
- [ElementInternals](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)
### CSS Tricks
- [Web Components Are Easier Than You Think](https://css-tricks.com/web-components-are-easier-than-you-think/)
- [Interactive Web Components Are Easier Than You Think](https://css-tricks.com/interactive-web-components-are-easier-than-you-think/)
- [Using Web Components in WordPress is Easier Than You Think](https://css-tricks.com/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](https://css-tricks.com/context-aware-web-components/)
- [Web Component Pseudo-Classes and Pseudo-Elements are Easier Than You Think](https://css-tricks.com/web-component-pseudo-classes-and-pseudo-elements/)
### javascript.info
- [From the orbital height](https://javascript.info/webcomponents-intro)
- [Custom elements](https://javascript.info/custom-elements)
- [Shadow DOM](https://javascript.info/shadow-dom)
- [Template element](https://javascript.info/template-element)
- [Shadow DOM slots, composition](https://javascript.info/slots-composition)
- [Shadow DOM styling](https://javascript.info/shadow-dom-style)
- [Shadow DOM and events](https://javascript.info/shadow-dom-events)
### dev.to
- [Custom Forms with Web Components and "ElementInternals](https://dev.to/stuffbreaker/custom-forms-with-web-components-and-elementinternals-4jaj)
### Medium
- [About Web Components](https://eisenbergeffect.medium.com/about-web-components-7b2a3ed67a78)
## Misc (Tools, guides, etc)
- [awesome-web-components](https://github.com/web-padawan/awesome-web-components)
- [Modern Web](https://modern-web.dev/)
- [Custom Elements Manifest](https://custom-elements-manifest.open-wc.org/)
- [web-component-analyzer](https://github.com/runem/web-component-analyzer)
- [CEM Tools](https://github.com/break-stuff/cem-tools)
- [Open Web Components](https://open-wc.org/)
- [webcomponents.org](https://www.webcomponents.org/)
- [Web Components Today](https://webcomponents.today/)
## Third party components
### Design systems
- [shoelace](https://shoelace.style/) - A forward-thinking library of web components
- [Carbon Design System](https://carbondesignsystem.com/) - IBM’s open source design system
- [Fluent UI](https://learn.microsoft.com/en-gb/fluent-ui/web-components/) - Microsoft's Fluent UI Web Components
- [Lion](https://lion-web.netlify.app/) - Fundamental white label web components for building your design system
- [Vaadin](https://vaadin.com/) - Vaadin Web Components
- [Material](https://material-web.dev/) - The official web component set for Material 3
### Standalone components
- [details-utils](https://github.com/zachleat/details-utils) - Add enhancements to `details` elements.
- [html-include](https://github.com/justinfagnani/html-include-element) - Easily include external HTML into your pages.
- [seven-minute-tabs](https://github.com/zachleat/seven-minute-tabs) - Tabs web component.
- [video-radio-star](https://github.com/zachleat/video-radio-star) - A lightweight web component helper for HTML5 videos.
- [github-elements](https://github.com/github/github-elements) - GitHub's Web Component collection.
- [howto-components](https://github.com/GoogleChromeLabs/howto-components) - A collection of web components for educational purposes with a special focus on accessibility, performance and progressive enhancement.
- [two-up](https://github.com/GoogleChromeLabs/two-up) - A web component to compare two DOM elements.
- [pinch-zoom](https://github.com/GoogleChromeLabs/pinch-zoom) - A web component for pinch zooming DOM elements.
- [dark-mode-toggle](https://github.com/GoogleChromeLabs/dark-mode-toggle) - A custom element that allows you to easily put a Dark Mode toggle or switch on your site.
- [rhino-editor](https://github.com/KonnorRogers/rhino-editor) - To create a grab and go WYSIWYG editing experience that can hook into Ruby on Rails ActionText backend.
- [emoji-picker-element](https://github.com/nolanlawson/emoji-picker-element) - A lightweight emoji picker, distributed as a web component.
- [codemirror-elements](https://github.com/justinfagnani/codemirror-elements) - A set of CodeMirror custom HTML elements.
- [table-show](https://github.com/zachleat/table-saw) - A small web component for responsive <table> elements.
- [browser-window](https://github.com/zachleat/browser-window) - A small themed zero-dependency Web Component for demos with a fake browser window (Safari-esque).
- [squirm-inal](https://github.com/zachleat/squirminal) - The squirminal is a fake antique terminal web component.
- [last-icon](https://github.com/lekoala/last-icon) - An icon library using custom elements.
- [ppp-price](https://github.com/zachleat/parity-purchasing-power-price) - A small structural-only zero-dependency Web Component to show Parity Purchasing Power normalized prices.
- [sparkly-text](https://github.com/stefanjudis/sparkly-text) - A small zero-dependency Web Component to add sparkles to text fragments.
- [dia-date-picker](https://github.com/break-stuff/dia-date-picker) - A lightweight framework agnostic date picker and calendar component.
- [is-land](https://github.com/11ty/is-land) - A framework independent partial hydration islands architecture implementation.
- [img-comparison-slider](https://github.com/sneas/img-comparison-slider) - A slider component for comparing images.
- [image-compare](https://github.com/cloudfour/image-compare) - A web component for comparing two images using a slider.
- [qr-code](https://github.com/bitjson/qr-code) - A customizable, animate-able, SVG-based QR code custom element.
- [snow-fall](https://github.com/zachleat/snow-fall) - A web component to add snow to your web site (or to an element on your web site).
- [click-spark](https://github.com/hexagoncircle/click-spark) - A web component that adds a little spark to your clicks.
- [carouscroll](https://github.com/zachleat/carouscroll) - A web component to add next/previous buttons to a horizontal scrollable container.
- [hypercard](https://github.com/zachleat/hypercard) - Web component to add a three-dimensional hover effect to a card.
- [Cally](https://github.com/WickyNilliams/cally) - Small, feature-rich of calendar components.
- [link-peek](https://github.com/daviddarnes/link-peek) - A Web Component to unfurl regular links into rich previews.
- [wired-elements](https://github.com/rough-stuff/wired-elements) - Collection of custom elements that appear hand drawn.
- [code-pen](https://github.com/daviddarnes/code-pen?tab=readme-ov-file) - A Web Component for opening code blocks in CodePen.
- [light-pen](https://github.com/konnorrogers/light-pen?tab=readme-ov-file) - A lightweight codepen implementation using web components.
- [playground-elements](https://github.com/google/playground-elements) - A set of components for creating interactive editable coding environments on the web.
- [i-html](https://github.com/keithamus/i-html) - A web component that allows for dynamically importing html inline.
- [inspector-elements](https://github.com/elematic/inspector-elements) - Web components for visually inspecting objects.
- [model-viewer](https://github.com/google/model-viewer) - Display interactive 3D models on the web and in AR.
- [stacked-alpha-video](https://github.com/jakearchibald/stacked-alpha-video) -
A web component for rendering video with transparency, efficiently.
- [code-bubble](https://github.com/break-stuff/code-bubble) - A web component that provides inline code examples that link out to StackBlitz sandboxes.
- [pie-chart](
https://pie-meister.github.io/) - Custom elements to draw pie charts.
- [baseline-status](https://github.com/web-platform-dx/baseline-status) - A widget displaying Baseline status of a web feature based on https://github.com/web-platform-dx/web-features data.
- [audio-recorder](https://github.com/DannyMoerkerke/audio-recorder) - Audio Recorder Web Component.
- [form-element-mixin](https://github.com/DannyMoerkerke/form-element-mixin) - Mixin to associate a Custom Element with forms.
- [custom-element](https://github.com/DannyMoerkerke/custom-element) - A base class for Web Components (Custom Elements) which provides simple data binding.
- [form-participation](https://github.com/open-wc/form-participation) - Helper, mixins, tools, and more for supporting your custom elements in participating in an ancestor form.
- [pixel-canvas](https://github.com/hexagoncircle/pixel-canvas?tab=readme-ov-file) - Custom element that applies a shimmering pixel background on element hover.
- [media-chrome](https://github.com/muxinc/media-chrome) - Custom elements for making audio and video player controls that look great in your website or app.
- [wc-dox](https://github.com/break-stuff/wc-dox) - Web component API documentation generator.
- [qr-element](https://github.com/dgrammatiko/qr-element) - Web component to generate QR codes from a string input.