{"id":15388214,"url":"https://github.com/georapbox/custom-elements","last_synced_at":"2025-04-15T17:33:45.137Z","repository":{"id":77674422,"uuid":"481102794","full_name":"georapbox/custom-elements","owner":"georapbox","description":"A list of my Custom Elements (Web Components) and some useful links with related material.","archived":false,"fork":false,"pushed_at":"2024-10-05T08:11:30.000Z","size":89,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-10-05T12:59:23.135Z","etag":null,"topics":["custom-elements","web-components"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/georapbox.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-13T06:43:48.000Z","updated_at":"2024-10-05T08:11:33.000Z","dependencies_parsed_at":"2023-11-18T18:22:32.281Z","dependency_job_id":"db0a95da-58be-49dd-8eff-1cff6d8b421b","html_url":"https://github.com/georapbox/custom-elements","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/georapbox%2Fcustom-elements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/georapbox%2Fcustom-elements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/georapbox%2Fcustom-elements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/georapbox%2Fcustom-elements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/georapbox","download_url":"https://codeload.github.com/georapbox/custom-elements/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219911893,"owners_count":16567835,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["custom-elements","web-components"],"created_at":"2024-10-01T14:55:59.152Z","updated_at":"2025-04-15T17:33:45.129Z","avatar_url":"https://github.com/georapbox.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Custom Elements\n\nA list of my Custom Elements (Web Components) and some useful links with related material.\n\n## Components\n\n### \u0026lt;a-tab-group\u0026gt;\nA custom element to create a group of tabs and tab panels.  \n[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/)\n\n### \u0026lt;capture-photo\u0026gt;\nA custom element to capture a photo in the browser implementing the `MediaDevices.getUserMedia()` of the MediaDevices interface.  \n[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/)\n\n### \u0026lt;clipboard-copy\u0026gt;\nA custom element that implements the Clipboard API to copy text content from elements or input values to the clipboard.  \n[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/)\n\n### \u0026lt;eye-dropper\u0026gt;\nA custom element that implements the EyeDropper API that allows the user to select colors from the screen.  \n[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/)\n\n### \u0026lt;files-dropzone\u0026gt;\nA custom element that creates a drag and drop zone for files.  \n[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/)\n\n### \u0026lt;lorem-ipsum\u0026gt;\nA custom element that generates \"Lorem Ipsum\" placeholder text.  \n[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/)\n\n### \u0026lt;modal-element\u0026gt;\nA custom element to create a modal, using the native `\u003cdialog\u003e` element under the hood.  \n[repository](https://github.com/georapbox/modal-element) • [npm](https://www.npmjs.com/package/@georapbox/modal-element) • [demo](https://georapbox.github.io/modal-element/)\n\n### \u0026lt;mutation-observer\u0026gt;\nA custom element that offers a declarative interface to the MutationObserver API.  \n[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/)\n\n### \u0026lt;picture-in-picture\u0026gt;\nA custom element that offers a declarative interface to the Picture-in-Picture API.  \n[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/)\n\n### \u0026lt;resize-observer\u0026gt;\nA custom element that offers a declarative interface to the ResizeObserver API.  \n[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/)\n\n### \u0026lt;scroll-top\u0026gt;\nA custom element that scrolls to the top of the page using the IntersectionObserver API.  \n[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/)\n\n### \u0026lt;skeleton-placeholder\u0026gt;\nA custom element that acts as a placeholder to indicate that some content will eventually be rendered.  \n[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/)\n\n### \u0026lt;theme-toggle\u0026gt;\nA custom element that allows you to toggle between light, dark and system theme.  \n[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/)\n\n### \u0026lt;web-share\u0026gt;\nA custom element that implements the Web Share API to share user-defined data.  \n[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/)\n\n## Learning material\n\n### Specs\n\n- [Custom elements](https://html.spec.whatwg.org/multipage/custom-elements.html)\n\n### web.dev\n\n- [Custom Elements v1 - Reusable Web Components](https://web.dev/custom-elements-v1/)\n- [Shadow DOM v1 - Self-Contained Web Components](https://web.dev/shadowdom-v1/)\n- [Custom Element Best Practices](https://web.dev/custom-elements-best-practices/)\n- [Declarative Shadow DOM](https://web.dev/declarative-shadow-dom/)\n- [HTML's New Template Tag](https://web.dev/webcomponents-template/)\n- [Constructable Stylesheets](https://web.dev/constructable-stylesheets/)\n\n### MDN\n\n- [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)\n- [Using custom elements](https://developer.mozilla.org/docs/Web/Web_Components/Using_custom_elements)\n- [Using shadow DOM](https://developer.mozilla.org/docs/Web/Web_Components/Using_shadow_DOM)\n- [Using templates and slots](https://developer.mozilla.org/docs/Web/Web_Components/Using_templates_and_slots)\n- [CustomElementRegistry](https://developer.mozilla.org/docs/Web/API/CustomElementRegistry)\n- [HTMLSlotElement](https://developer.mozilla.org/docs/Web/API/HTMLSlotElement)\n- [HTMLTemplateElement](https://developer.mozilla.org/docs/Web/API/HTMLTemplateElement)\n- [ShadowRoot](https://developer.mozilla.org/docs/Web/API/ShadowRoot)\n- [ElementInternals](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)\n\n### CSS Tricks\n\n- [Web Components Are Easier Than You Think](https://css-tricks.com/web-components-are-easier-than-you-think/)\n- [Interactive Web Components Are Easier Than You Think](https://css-tricks.com/interactive-web-components-are-easier-than-you-think/)\n- [Using Web Components in WordPress is Easier Than You Think](https://css-tricks.com/using-web-components-in-wordpress-is-easier-than-you-think/)\n- [Supercharging Built-In Elements With Web Components is Easier Than You Think]()\n- [Context-Aware Web Components Are Easier Than You Think](https://css-tricks.com/context-aware-web-components/)\n- [Web Component Pseudo-Classes and Pseudo-Elements are Easier Than You Think](https://css-tricks.com/web-component-pseudo-classes-and-pseudo-elements/)\n\n### javascript.info\n\n- [From the orbital height](https://javascript.info/webcomponents-intro)\n- [Custom elements](https://javascript.info/custom-elements)\n- [Shadow DOM](https://javascript.info/shadow-dom)\n- [Template element](https://javascript.info/template-element)\n- [Shadow DOM slots, composition](https://javascript.info/slots-composition)\n- [Shadow DOM styling](https://javascript.info/shadow-dom-style)\n- [Shadow DOM and events](https://javascript.info/shadow-dom-events)\n\n### dev.to\n\n- [Custom Forms with Web Components and \"ElementInternals](https://dev.to/stuffbreaker/custom-forms-with-web-components-and-elementinternals-4jaj)\n\n### Medium\n\n- [About Web Components](https://eisenbergeffect.medium.com/about-web-components-7b2a3ed67a78)\n\n## Misc (Tools, guides, etc)\n\n- [awesome-web-components](https://github.com/web-padawan/awesome-web-components)\n- [Modern Web](https://modern-web.dev/)\n- [Custom Elements Manifest](https://custom-elements-manifest.open-wc.org/)\n- [web-component-analyzer](https://github.com/runem/web-component-analyzer)\n- [CEM Tools](https://github.com/break-stuff/cem-tools)\n- [Open Web Components](https://open-wc.org/)\n- [webcomponents.org](https://www.webcomponents.org/)\n- [Web Components Today](https://webcomponents.today/)\n\n## Third party components\n\n### Design systems\n\n- [shoelace](https://shoelace.style/) - A forward-thinking library of web components\n- [Carbon Design System](https://carbondesignsystem.com/) - IBM’s open source design system\n- [Fluent UI](https://learn.microsoft.com/en-gb/fluent-ui/web-components/) - Microsoft's Fluent UI Web Components\n- [Lion](https://lion-web.netlify.app/) - Fundamental white label web components for building your design system\n- [Vaadin](https://vaadin.com/) - Vaadin Web Components\n- [Material](https://material-web.dev/) - The official web component set for Material 3\n\n### Standalone components\n\n- [details-utils](https://github.com/zachleat/details-utils) - Add enhancements to `details` elements.\n- [html-include](https://github.com/justinfagnani/html-include-element) - Easily include external HTML into your pages.\n- [seven-minute-tabs](https://github.com/zachleat/seven-minute-tabs) - Tabs web component.\n- [video-radio-star](https://github.com/zachleat/video-radio-star) - A lightweight web component helper for HTML5 videos.\n- [github-elements](https://github.com/github/github-elements) - GitHub's Web Component collection.\n- [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.\n- [two-up](https://github.com/GoogleChromeLabs/two-up) - A web component to compare two DOM elements.\n- [pinch-zoom](https://github.com/GoogleChromeLabs/pinch-zoom) - A web component for pinch zooming DOM elements.\n- [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.\n- [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.\n- [emoji-picker-element](https://github.com/nolanlawson/emoji-picker-element) - A lightweight emoji picker, distributed as a web component.\n- [codemirror-elements](https://github.com/justinfagnani/codemirror-elements) - A set of CodeMirror custom HTML elements.\n- [table-show](https://github.com/zachleat/table-saw) - A small web component for responsive \u0026lt;table\u0026gt; elements.\n- [browser-window](https://github.com/zachleat/browser-window) - A small themed zero-dependency Web Component for demos with a fake browser window (Safari-esque).\n- [squirm-inal](https://github.com/zachleat/squirminal) - The squirminal is a fake antique terminal web component.\n- [last-icon](https://github.com/lekoala/last-icon) - An icon library using custom elements.\n- [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.\n- [sparkly-text](https://github.com/stefanjudis/sparkly-text) - A small zero-dependency Web Component to add sparkles to text fragments.\n- [dia-date-picker](https://github.com/break-stuff/dia-date-picker) - A lightweight framework agnostic date picker and calendar component.\n- [is-land](https://github.com/11ty/is-land) - A framework independent partial hydration islands architecture implementation.\n- [img-comparison-slider](https://github.com/sneas/img-comparison-slider) - A slider component for comparing images.\n- [image-compare](https://github.com/cloudfour/image-compare) - A web component for comparing two images using a slider.\n- [qr-code](https://github.com/bitjson/qr-code) - A customizable, animate-able, SVG-based QR code custom element.\n- [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).\n- [click-spark](https://github.com/hexagoncircle/click-spark) - A web component that adds a little spark to your clicks.\n- [carouscroll](https://github.com/zachleat/carouscroll) - A web component to add next/previous buttons to a horizontal scrollable container.\n- [hypercard](https://github.com/zachleat/hypercard) - Web component to add a three-dimensional hover effect to a card.\n- [Cally](https://github.com/WickyNilliams/cally) - Small, feature-rich of calendar components.\n- [link-peek](https://github.com/daviddarnes/link-peek) - A Web Component to unfurl regular links into rich previews.\n- [wired-elements](https://github.com/rough-stuff/wired-elements) - Collection of custom elements that appear hand drawn.\n- [code-pen](https://github.com/daviddarnes/code-pen?tab=readme-ov-file) - A Web Component for opening code blocks in CodePen.\n- [light-pen](https://github.com/konnorrogers/light-pen?tab=readme-ov-file) - A lightweight codepen implementation using web components.\n- [playground-elements](https://github.com/google/playground-elements) - A set of components for creating interactive editable coding environments on the web.\n- [i-html](https://github.com/keithamus/i-html) - A web component that allows for dynamically importing html inline.\n- [inspector-elements](https://github.com/elematic/inspector-elements) - Web components for visually inspecting objects.\n- [model-viewer](https://github.com/google/model-viewer) - Display interactive 3D models on the web and in AR.\n- [stacked-alpha-video](https://github.com/jakearchibald/stacked-alpha-video) - \nA web component for rendering video with transparency, efficiently.\n- [code-bubble](https://github.com/break-stuff/code-bubble) - A web component that provides inline code examples that link out to StackBlitz sandboxes.\n- [pie-chart](\nhttps://pie-meister.github.io/) - Custom elements to draw pie charts.\n- [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.\n- [audio-recorder](https://github.com/DannyMoerkerke/audio-recorder) - Audio Recorder Web Component.\n- [form-element-mixin](https://github.com/DannyMoerkerke/form-element-mixin) - Mixin to associate a Custom Element with forms.\n- [custom-element](https://github.com/DannyMoerkerke/custom-element) - A base class for Web Components (Custom Elements) which provides simple data binding.\n- [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.\n- [pixel-canvas](https://github.com/hexagoncircle/pixel-canvas?tab=readme-ov-file) - Custom element that applies a shimmering pixel background on element hover.\n- [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.\n- [wc-dox](https://github.com/break-stuff/wc-dox) - Web component API documentation generator.\n- [qr-element](https://github.com/dgrammatiko/qr-element) - Web component to generate QR codes from a string input.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeorapbox%2Fcustom-elements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgeorapbox%2Fcustom-elements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeorapbox%2Fcustom-elements/lists"}