{"slug": "mateusortiz--webcomponents-the-right-way", "title": "Webcomponents the Right Way", "description": "A curated list of awesome Web Components resources.", "github_url": "https://github.com/web-padawan/awesome-web-components", "stars": "3.4K", "tag": "Front-End Development", "entry_count": 516, "subcategory_count": 37, "subcategories": [{"name": "General", "parent": "", "entries": [{"name": "Introduction", "url": "#introduction", "description": ""}, {"name": "Standards", "url": "#standards", "description": ""}, {"name": "Guides", "url": "#guides", "description": ""}, {"name": "Articles", "url": "#articles", "description": ""}, {"name": "Real World", "url": "#real-world", "description": ""}, {"name": "Libraries", "url": "#libraries", "description": ""}, {"name": "Frameworks", "url": "#frameworks", "description": ""}, {"name": "Ecosystem", "url": "#ecosystem", "description": ""}, {"name": "Books", "url": "#books", "description": ""}, {"name": "Tutorials", "url": "#tutorials", "description": ""}, {"name": "Insights", "url": "#insights", "description": ""}, {"name": "Usage Metrics", "url": "#usage-metrics", "description": ""}, {"name": "Proposals", "url": "#proposals", "description": ""}, {"name": "Miscellaneous", "url": "#miscellaneous", "description": ""}, {"name": "Archive", "url": "#archive", "description": ""}, {"name": "Who To Follow", "url": "#who-to-follow", "description": ""}, {"name": "Maintainers", "url": "#maintainers", "description": ""}, {"name": "An Introduction to Web Components", "url": "https://css-tricks.com/an-introduction-to-web-components/", "description": ""}, {"name": "Intro to Web Components", "url": "https://developer.salesforce.com/blogs/2020/01/intro-to-web-components.html", "description": ""}, {"name": "The Holy Grail Of Reusable Components: Custom Elements, Shadow DOM, And NPM", "url": "https://www.smashingmagazine.com/2018/07/reusable-components-custom-elements-shadow-dom-npm/", "description": ""}, {"name": "The Motivation For Using Web Components, an Introduction", "url": "https://www.thinktecture.com/web-components/introduction-and-motivation/", "description": ""}, {"name": "The Power of Web Components", "url": "https://hacks.mozilla.org/2018/11/the-power-of-web-components/", "description": ""}, {"name": "Web Components 101", "url": "https://nhswd.com/blog/web-components-101-what-are-web-components/", "description": ""}, {"name": "Web Components: From the orbital height", "url": "https://javascript.info/webcomponents-intro", "description": ""}, {"name": "What are browser-native web components?", "url": "https://gomakethings.com/what-are-browser-native-web-components/", "description": ""}, {"name": "Why Web Components?", "url": "https://www.fast.design/docs/resources/why-web-components/", "description": ""}]}, {"name": "Custom Elements", "parent": "Standards", "entries": [{"name": "A Guide to Custom Elements for React Developers", "url": "https://css-tricks.com/a-guide-to-custom-elements-for-react-developers/", "description": ""}, {"name": "All about HTML Custom Elements", "url": "https://github.com/shawnbot/custom-elements", "description": "", "stars": "203"}, {"name": "Custom elements", "url": "https://javascript.info/custom-elements", "description": ""}, {"name": "Custom Elements v1: Reusable Web Components", "url": "https://web.dev/custom-elements-v1/", "description": ""}, {"name": "Handling properties in custom element upgrades", "url": "https://nolanlawson.com/2021/08/03/handling-properties-in-custom-element-upgrades/", "description": ""}, {"name": "Handy Custom Elements' Patterns", "url": "https://gist.github.com/WebReflection/ec9f6687842aa385477c4afca625bbf4", "description": ""}, {"name": "HTML Living Standard: Custom elements", "url": "https://html.spec.whatwg.org/multipage/custom-elements.html", "description": ""}, {"name": "MDN - Using Custom Elements", "url": "https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements", "description": ""}, {"name": "web-platform-tests", "url": "https://github.com/web-platform-tests/wpt/tree/master/custom-elements", "description": "", "stars": "5.8k"}]}, {"name": "Shadow DOM", "parent": "Standards", "entries": [{"name": "A complete guide on shadow DOM and event propagation", "url": "https://pm.dartus.fr/blog/a-complete-guide-on-shadow-dom-and-event-propagation/", "description": ""}, {"name": "DOM Living Standard: Shadow tree", "url": "https://dom.spec.whatwg.org/#shadow-trees", "description": ""}, {"name": "MDN - Using Shadow DOM", "url": "https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM", "description": ""}, {"name": "Mind the document.activeElement!", "url": "https://dev.to/open-wc/mind-the-document-activeelement-2o9a", "description": ""}, {"name": "Open vs. Closed Shadow DOM", "url": "https://blog.revillweb.com/open-vs-closed-shadow-dom-9f3d7427d1af", "description": ""}, {"name": "Shadow DOM", "url": "https://javascript.info/shadow-dom", "description": ""}, {"name": "Shadow DOM and events", "url": "https://javascript.info/shadow-dom-events", "description": ""}, {"name": "Shadow DOM in depth", "url": "https://github.com/praveenpuglia/shadow-dom-in-depth", "description": "", "stars": "237"}, {"name": "Shadow DOM slots, composition", "url": "https://javascript.info/slots-composition", "description": ""}, {"name": "Shadow DOM styling", "url": "https://javascript.info/shadow-dom-style", "description": ""}, {"name": "Shadow DOM v1: Self-Contained Web Components", "url": "https://web.dev/shadowdom-v1/", "description": ""}, {"name": "The Rise of Shadow DOM", "url": "https://medium.com/front-end-hacking/the-rise-of-shadow-dom-84aa1f731e82", "description": ""}, {"name": "Understanding Slot Updates with Web Components", "url": "https://coryrylan.com/blog/understanding-slot-updates-with-web-components", "description": ""}, {"name": "What is the Shadow DOM?", "url": "https://bitsofco.de/what-is-the-shadow-dom/", "description": ""}, {"name": "Who doesn't love some slots?", "url": "https://dev.to/westbrook/who-doesnt-love-some-s-3de0", "description": ""}, {"name": "Your Content in Shadow DOM Portals", "url": "https://dev.to/westbrook/your-content-in-shadow-dom-portals-3cdb", "description": ""}, {"name": "web-platform-tests", "url": "https://github.com/web-platform-tests/wpt/tree/master/shadow-dom", "description": "", "stars": "5.8k"}]}, {"name": "HTML Templates", "parent": "Standards", "entries": [{"name": "Crafting Reusable HTML Templates", "url": "https://css-tricks.com/crafting-reusable-html-templates/", "description": ""}, {"name": "HTML Living Standard: The `template` element", "url": "https://html.spec.whatwg.org/multipage/scripting.html#the-template-element", "description": ""}, {"name": "HTML templates with vanilla JavaScript", "url": "https://gomakethings.com/html-templates-with-vanilla-javascript/", "description": ""}, {"name": "MDN - \\<template>: The Content Template element", "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template", "description": ""}, {"name": "MDN - Using templates and slots", "url": "https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots", "description": ""}, {"name": "Template element", "url": "https://javascript.info/template-element", "description": ""}, {"name": "Templating in HTML", "url": "https://kittygiraudel.com/2022/09/30/templating-in-html/", "description": ""}, {"name": "The HTML5 template element", "url": "https://dev.to/ahferroin7/the-html5-template-element-26b6", "description": ""}, {"name": "Understanding The Template Element In HTML", "url": "https://blog.openreplay.com/understanding-the-template-element-in-html/", "description": ""}, {"name": "web-platform-tests", "url": "https://github.com/web-platform-tests/wpt/tree/master/html/semantics/scripting-1/the-template-element", "description": "", "stars": "5.8k"}]}, {"name": "CSS Shadow Parts", "parent": "Standards", "entries": [{"name": "W3C First Public Working Draft", "url": "https://www.w3.org/TR/css-shadow-parts-1/", "description": ""}, {"name": "CSS Shadow Parts are coming!", "url": "https://dev.to/webpadawan/css-shadow-parts-are-coming-mi5", "description": ""}, {"name": "MDN - `::part()` CSS pseudo element", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/::part", "description": ""}, {"name": "MDN - `part` global attribute", "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part", "description": ""}, {"name": "::part and ::theme, an ::explainer", "url": "https://meowni.ca/posts/part-theme-explainer/", "description": ""}, {"name": "web-platform-tests", "url": "https://github.com/web-platform-tests/wpt/tree/master/css/css-shadow-parts", "description": "", "stars": "5.8k"}]}, {"name": "Accessibility", "parent": "Guides", "entries": [{"name": "Accessibility for Web Components", "url": "https://developer.salesforce.com/blogs/2020/01/accessibility-for-web-components.html", "description": ""}, {"name": "Accessibility with ID Referencing and Shadow DOM", "url": "https://coryrylan.com/blog/accessibility-with-id-referencing-and-shadow-dom", "description": ""}, {"name": "Dialogs and shadow DOM: can we make it accessible?", "url": "https://nolanlawson.com/2022/06/14/dialogs-and-shadow-dom-can-we-make-it-accessible/", "description": ""}, {"name": "How to Make Accessible Web Components \u2014 a Brief Guide", "url": "https://www.sitepoint.com/accessible-web-components/", "description": ""}, {"name": "Managing focus in the shadow DOM", "url": "https://nolanlawson.com/2021/02/13/managing-focus-in-the-shadow-dom/", "description": ""}, {"name": "The future of accessibility for custom elements", "url": "https://robdodson.me/the-future-of-accessibility-for-custom-elements/", "description": ""}, {"name": "The Guide to Accessible Web Components", "url": "https://www.erikkroes.nl/blog/accessibility/the-guide-to-accessible-web-components-draft/", "description": ""}, {"name": "Web Components and the Accessibility Object model (AOM)", "url": "https://www.24a11y.com/2019/web-components-and-the-aom/", "description": ""}, {"name": "Web Components punch list", "url": "https://www.tpgi.com/web-components-punch-list/", "description": ""}, {"name": "Web components still need to be accessible", "url": "https://www.24a11y.com/2018/web-components-still-need-to-be-accessible/", "description": ""}]}, {"name": "Best Practices", "parent": "Guides", "entries": [{"name": "Custom Element Best Practices", "url": "https://web.dev/custom-elements-best-practices/", "description": ""}, {"name": "Developing Components: Publishing", "url": "https://open-wc.org/guides/developing-components/publishing/", "description": ""}, {"name": "Gold Standard Checklist for Web Components", "url": "https://github.com/webcomponents/gold-standard/wiki", "description": "", "stars": "1k"}, {"name": "Guidelines for creating web platform compatible components", "url": "https://w3ctag.github.io/webcomponents-design-guidelines/", "description": ""}, {"name": "How to Publish Web Components to NPM", "url": "https://justinfagnani.com/2019/11/01/how-to-publish-web-components-to-npm/", "description": ""}, {"name": "Open Web Components Recommendations", "url": "https://open-wc.org", "description": ""}]}, {"name": "Codelabs", "parent": "Guides", "entries": [{"name": "Build a Story Web Component with LitElement", "url": "https://dev.to/straversi/build-a-story-web-component-with-litelement-e59", "description": ""}, {"name": "Building Custom Elements with Web Components for the 2020 Elections", "url": "https://medium.com/stories-from-upstatement/building-custom-elements-with-web-components-for-the-2020-elections-f767ff9e9c6a", "description": ""}, {"name": "Creating Custom Form Controls with ElementInternals", "url": "https://css-tricks.com/creating-custom-form-controls-with-elementinternals/", "description": ""}, {"name": "From Web Component to Lit Element", "url": "https://codelabs.developers.google.com/codelabs/the-lit-path", "description": ""}, {"name": "HowTo Components \u2013`<howto-checkbox>`", "url": "https://web.dev/components-howto-checkbox/", "description": ""}, {"name": "HowTo Components \u2013`<howto-tabs>`", "url": "https://web.dev/components-howto-tabs/", "description": ""}, {"name": "HowTo Components \u2013 `<howto-tooltip>`", "url": "https://web.dev/components-howto-tooltip/", "description": ""}, {"name": "Lit: basics", "url": "https://open-wc.org/codelabs/basics/lit-html.html#0", "description": ""}, {"name": "Lit: intermediate", "url": "https://open-wc.org/codelabs/intermediate/lit-html.html#0", "description": ""}, {"name": "Lit for React Developers", "url": "https://codelabs.developers.google.com/codelabs/lit-2-for-react-devs#0", "description": ""}, {"name": "Web Components: basics", "url": "https://open-wc.org/codelabs/basics/web-components.html#0", "description": ""}]}, {"name": "Examples", "parent": "Guides", "entries": [{"name": "generic-components", "url": "https://github.com/thepassle/generic-components", "description": "Collection of generic web components with a focus on accessibility, and ease of use.", "stars": "573"}, {"name": "howto-components", "url": "https://github.com/GoogleChromeLabs/howto-components", "description": "Collection of web components that implement common web UI patterns.", "stars": "874"}, {"name": "Nude UI", "url": "https://github.com/LeaVerou/nudeui", "description": "Collection of accessible, customizable, ultra-light web components.", "stars": "232"}, {"name": "open-wc code examples", "url": "https://open-wc.org/guides/developing-components/code-examples/", "description": "Collection of best practices and design patterns for developing web components."}, {"name": "vanilla-retro-js", "url": "https://github.com/martine-dowden/vanilla-retro-js", "description": "Vanilla JS UI component library of HTML deprecated tags.", "stars": "17"}, {"name": "web-components-examples", "url": "https://github.com/mdn/web-components-examples", "description": "Series of web components examples, related to the MDN web components documentation.", "stars": "3.4k"}]}, {"name": "Architecture", "parent": "Articles", "entries": [{"name": "A deep analysis into isomorphic, autonomous cross-framework usage #MicroFrontends", "url": "https://itnext.io/a-deep-analysis-into-isomorphic-autonomous-cross-framework-usage-microfrontends-364271dc5fa9", "description": ""}, {"name": "Frankenstein Migration: Framework-Agnostic Approach (Part 1)", "url": "https://www.smashingmagazine.com/2019/09/frankenstein-migration-framework-agnostic-approach-part-1/", "description": ""}, {"name": "Frankenstein Migration: Framework-Agnostic Approach (Part 2)", "url": "https://www.smashingmagazine.com/2019/09/frankenstein-migration-framework-agnostic-approach-part-2/", "description": ""}, {"name": "Generating Config driven Dynamic Forms using Web Components", "url": "https://codeburst.io/generating-config-driven-dynamic-forms-using-web-components-7c8d400f7f2e", "description": ""}, {"name": "Hiding internal framework methods and properties from web component APIs", "url": "https://component.kitchen/blog/posts/hiding-internal-framework-methods-and-properties-from-web-component-apis", "description": ""}, {"name": "How to deliver Custom Elements", "url": "https://medium.com/@WebReflection/how-to-deliver-custom-elements-702fae32d25c", "description": ""}, {"name": "Making Web Components for Different Contexts", "url": "https://css-tricks.com/making-web-components-for-different-contexts/", "description": ""}, {"name": "Supporting both automatic and manual registration of custom elements", "url": "https://component.kitchen/blog/posts/supporting-both-automatic-and-manual-registration-of-custom-elements", "description": ""}, {"name": "Web Components \u2014 the right way", "url": "https://equinusocio.dev/blog/web-components-the-right-way/", "description": ""}]}, {"name": "Interoperability", "parent": "Articles", "entries": [{"name": "Advanced Tooling for Web Components", "url": "https://css-tricks.com/advanced-tooling-for-web-components/", "description": ""}, {"name": "Custom Elements Everywhere", "url": "https://custom-elements-everywhere.com", "description": ""}, {"name": "Custom Elements That Work Anywhere", "url": "https://robdodson.me/interoperable-custom-elements/", "description": ""}, {"name": "JavaScript frameworks, meet Web Components", "url": "https://www.voorhoede.nl/nl/blog/javascript-frameworks-meet-web-components/", "description": ""}, {"name": "Web Components aren't a framework replacement - they're better than that", "url": "https://lamplightdev.com/blog/2020/01/18/web-components-arent-a-framework-replacement-theyre-better-than-that/", "description": ""}, {"name": "Web Components: Seamlessly interoperable", "url": "https://medium.com/@sergicontre/web-components-seamlessly-interoperable-82efd6989ca4", "description": ""}]}, {"name": "Limitations", "parent": "Articles", "entries": [{"name": "Beyond the polyfills: how Web Components affect us today?", "url": "https://dev.to/webpadawan/beyond-the-polyfills-how-web-components-affect-us-today-3j0a", "description": ""}, {"name": "Custom elements, shadow DOM and implicit form submission", "url": "https://www.hjorthhansen.dev/shadow-dom-and-forms/", "description": ""}, {"name": "Form-associated custom elements", "url": "https://www.hjorthhansen.dev/shadow-dom-form-participation/", "description": ""}, {"name": "You might not need shadow DOM", "url": "https://www.hjorthhansen.dev/you-might-not-need-shadow-dom/", "description": ""}]}, {"name": "Styling", "parent": "Articles", "entries": [{"name": "Does shadow DOM improve style performance?", "url": "https://nolanlawson.com/2021/08/15/does-shadow-dom-improve-style-performance/", "description": ""}, {"name": "Eschewing Shadow DOM", "url": "https://every-layout.dev/blog/eschewing-shadow-dom/", "description": ""}, {"name": "How Nordhealth uses Custom Properties in Web Components", "url": "https://web.dev/custom-properties-web-components/", "description": ""}, {"name": "Options for styling web components", "url": "https://nolanlawson.com/2021/01/03/options-for-styling-web-components/", "description": ""}, {"name": "Style scoping versus shadow DOM: which is fastest?", "url": "https://nolanlawson.com/2022/06/22/style-scoping-versus-shadow-dom-which-is-fastest/", "description": ""}, {"name": "Styling a Web Component", "url": "https://css-tricks.com/styling-a-web-component/", "description": ""}, {"name": "Styling in the Shadow DOM With CSS Shadow Parts", "url": "https://css-tricks.com/styling-in-the-shadow-dom-with-css-shadow-parts/", "description": ""}, {"name": "Thinking Through Styling Options for Web Components", "url": "https://css-tricks.com/thinking-through-styling-options-for-web-components/", "description": ""}, {"name": "Web Component Pseudo-Classes and Pseudo-Elements are Easier Than You Think", "url": "https://css-tricks.com/web-component-pseudo-classes-and-pseudo-elements/", "description": ""}, {"name": "Web Standards Meet User-Land: Using CSS-in-JS to Style Custom Elements", "url": "https://css-tricks.com/web-standards-meet-user-land-using-css-in-js-to-style-custom-elements/", "description": ""}]}, {"name": "Case Studies", "parent": "Real World", "entries": [{"name": "Apple Just Shipped Web Components to Production and You Probably Missed It", "url": "https://dev.to/ionic/apple-just-shipped-web-components-to-production-and-you-probably-missed-it-57pf", "description": ""}, {"name": "Bringing Order to Web Design Chaos (with Web Components)", "url": "https://dev.to/thatjoemoore/bringing-order-to-web-design-chaos--3fhb", "description": ""}, {"name": "Get moving with Microsoft\u2019s FAST web components", "url": "https://www.infoworld.com/article/3618410/get-moving-with-microsofts-fast-web-components.html", "description": ""}, {"name": "How Web Components Are Used at GitHub and Salesforce", "url": "https://thenewstack.io/how-web-components-are-used-at-github-and-salesforce/", "description": ""}, {"name": "How we use Web Components at GitHub", "url": "https://github.blog/2021-05-04-how-we-use-web-components-at-github/", "description": ""}, {"name": "Implementing a Design Language System with Stencil.js", "url": "https://medium.com/@Danetag/implementing-a-design-language-system-with-stencil-js-515432918eb5", "description": ""}, {"name": "ING \u2764 Web Components", "url": "https://dev.to/thepassle/ing--web-components-aef", "description": ""}, {"name": "ING Open-Sources Lion, Its White-Label Web Component Library \u2013 Q\\&A with Thomas Allmer", "url": "https://www.infoq.com/articles/ing-open-sources-lion-web-component/", "description": ""}, {"name": "Lessons Learned, making our app with Web Components", "url": "https://medium.com/samsung-internet-dev/lessons-learned-making-our-app-with-web-components-bf55379cfcda", "description": ""}, {"name": "Looking back on five years of web components", "url": "https://bitworking.org/news/2019/07/looking-back-on-five-years-of-web-components", "description": ""}, {"name": "Shipping Web Components in 2020", "url": "https://dev.to/joe8bit/shipping-web-components-in-2020-2h54", "description": ""}, {"name": "The Firefox UI is now built with Web Components", "url": "https://briangrinstead.com/blog/firefox-webcomponents/", "description": ""}, {"name": "Using web components to encapsulate CSS and resolve design system conflicts", "url": "https://about.gitlab.com/blog/2021/05/03/using-web-components-to-encapsulate-css-and-resolve-design-system-conflicts/", "description": ""}, {"name": "Web Components at GitHub - Web Components SF Meetup", "url": "https://www.infoq.com/news/2020/08/web-components-sf-meetup-2020/", "description": ""}, {"name": "Web Components at Scale at Salesforce: Challenges Encountered, Lessons Learnt", "url": "https://www.infoq.com/news/2020/03/web-components-salesforce-lwc/", "description": ""}, {"name": "Web Development At Scale: Composable Applications With Web Components", "url": "https://medium.com/@jarrodek/composable-applications-with-web-components-ebe5158387be", "description": ""}, {"name": "web.dev engineering blog #1: How we build the site and use Web Components", "url": "https://web.dev/how-we-build-webdev-and-use-web-components/", "description": ""}]}, {"name": "Components", "parent": "Real World", "entries": [{"name": "`<active-table>`", "url": "https://github.com/OvidijusParsiunas/active-table", "description": "Editable table web component."}, {"name": "`<api-viewer>`", "url": "https://github.com/web-padawan/api-viewer-element", "description": "API documentation and live playground for Web Components."}, {"name": "`<chess-board>`", "url": "https://github.com/justinfagnani/chessboard-element", "description": "Standalone chess board web component."}, {"name": "`<css-doodle>`", "url": "https://github.com/css-doodle/css-doodle", "description": "Web component for drawing patterns with CSS."}, {"name": "`<dark-mode-toggle>`", "url": "https://github.com/GoogleChromeLabs/dark-mode-toggle", "description": "Custom element that allows to create a dark mode toggle or switch."}, {"name": "`<deep-chat>`", "url": "https://github.com/OvidijusParsiunas/deep-chat", "description": "Web component for chat with AI capabilities."}, {"name": "`<emoji-picker>`", "url": "https://github.com/nolanlawson/emoji-picker-element", "description": "Lightweight emoji picker, distributed as a web component."}, {"name": "`<fg-modal>`", "url": "https://github.com/filamentgroup/fg-modal", "description": "Accessible modal dialog web component."}, {"name": "`<file-viewer>`", "url": "https://github.com/avipunes/file-viewer", "description": "Web component built with Svelte to view files."}, {"name": "`<json-viewer>`", "url": "https://github.com/alenaksu/json-viewer", "description": "Web component to visualize JSON data in a tree view."}, {"name": "`<lite-youtube>`", "url": "https://github.com/paulirish/lite-youtube-embed", "description": "Lite YouTube embed with a focus on visual performance."}, {"name": "`<midi-player>`", "url": "https://github.com/cifkao/html-midi-player", "description": "MIDI file player and visualizer web components."}, {"name": "`<model-viewer>`", "url": "https://github.com/google/model-viewer", "description": "Web component for rendering interactive 3D models."}, {"name": "`<notectl-editor>`", "url": "https://github.com/Samyssmile/notectl", "description": "Modern rich text editor with plugin architecture, immutable state, and zero-config framework-agnostic deployment."}, {"name": "`<pdfjs-viewer-element>`", "url": "https://github.com/alekswebnet/pdfjs-viewer-element", "description": "Custom element that embeds PDF.js default viewer."}, {"name": "`<player-x>`", "url": "https://github.com/playerxo/playerx", "description": "Media player web component."}, {"name": "`<progressive-image>`", "url": "https://github.com/andreruffert/progressive-image-element", "description": "Custom element to progressively enhance image placeholders."}, {"name": "`<qr-code>`", "url": "https://github.com/bitjson/qr-code", "description": "Web component for rendering customizable, animate-able, SVG-based QR codes."}, {"name": "`<range-slider>`", "url": "https://github.com/andreruffert/range-slider-element", "description": "Accessible range slider custom element with keyboard support."}, {"name": "`<rapi-doc>`", "url": "https://github.com/mrin9/RapiDoc", "description": "Web component for creating documentation from OpenAPI Specification."}, {"name": "`<shader-doodle>`", "url": "https://github.com/halvves/shader-doodle", "description": "Web component for writing and rendering shaders."}, {"name": "`<theme-switch>`", "url": "https://github.com/mahozad/theme-switch", "description": "Animated toggle button to switch between light, dark, and system theme."}, {"name": "`<trix-editor>`", "url": "https://github.com/basecamp/trix", "description": "Rich text editor custom element for everyday writing."}, {"name": "`<vime-player>`", "url": "https://github.com/vime-js/vime", "description": "Customizable, extensible, accessible and framework agnostic media player."}, {"name": "`<web-vitals>`", "url": "https://github.com/stefanjudis/web-vitals-element", "description": "Bring [web vitals (\u2b508.4k)](https://github.com/GoogleChrome/web-vitals) quickly into your page using custom elements."}]}, {"name": "Component Libraries", "parent": "Real World", "entries": [{"name": "AgnosticUI", "url": "https://github.com/AgnosticUI/agnosticui", "description": "A CLI-based UI component library that copies Lit web components directly into your project. Full React and Vue wrappers for native framework experience.", "stars": "773"}, {"name": "AMP", "url": "https://github.com/ampproject/amphtml", "description": "Web component framework for easily creating user-first websites, stories, ads, emails and more.", "stars": "15k"}, {"name": "AnywhereUI", "url": "https://github.com/adaleks/anywhere-ui", "description": "Collection of rich web components that includes framework bindings. Created with StencilJS.", "stars": "39"}, {"name": "Apollo Elements", "url": "https://github.com/apollo-elements/apollo-elements", "description": "Custom elements for using Apollo GraphQL with various web components libraries.", "stars": "423"}, {"name": "AXA Pattern Library", "url": "https://github.com/axa-ch-webhub-cloud/pattern-library", "description": "AXA CH UI components library built with Web Components.", "stars": "130"}, {"name": "Blackstone UI", "url": "https://github.com/kjantzer/bui", "description": "Web components for creating interfaces by Blackstone Publishing.", "stars": "108"}, {"name": "Blaze UI Atoms", "url": "https://github.com/BlazeSoftware/atoms", "description": "Set of web components powered by Blaze CSS.", "stars": "1.6k"}, {"name": "Brightspace UI core", "url": "https://github.com/BrightspaceUI/core", "description": "Collection of web components for building Brightspace applications.", "stars": "77"}, {"name": "Clever components", "url": "https://github.com/CleverCloud/clever-components", "description": "Collection of Web Components made by Clever Cloud.", "stars": "238"}, {"name": "Curvenote", "url": "https://github.com/curvenote/article", "description": "Web components for creating interactive scientific articles.", "stars": "193"}, {"name": "DataFormsJS", "url": "https://github.com/dataformsjs/dataformsjs", "description": "Standalone Components for SPA routing, displaying data from web services, and more.", "stars": "197"}, {"name": "Dile Components", "url": "https://github.com/Polydile/dile-components", "description": "General use Web Components for websites and applications.", "stars": "98"}, {"name": "elements-sk", "url": "https://github.com/google/elements-sk", "description": "Collection of custom elements for \"a la carte\" web development.", "stars": "29"}, {"name": "github-elements", "url": "https://github.com/github/github-elements", "description": "GitHub's Web Component collection.", "stars": "2.9k"}, {"name": "Elix", "url": "https://github.com/elix/elix", "description": "High-quality, customizable web components for common user interface patterns.", "stars": "833"}, {"name": "Furo Webcomponents", "url": "https://github.com/eclipse/eclipsefuro-web", "description": "Enterprise ready set of web components which work best with Eclipse Furo.", "stars": "12"}, {"name": "Fusion Web Components", "url": "https://github.com/equinor/fusion-web-components", "description": "Ser of web components used by Equinor Fusion.", "stars": "13"}, {"name": "Ignite UI Web Components", "url": "https://github.com/IgniteUI/igniteui-webcomponents", "description": "Complete library of UI components from Infragistics.", "stars": "168"}, {"name": "Immersive Custom Elements", "url": "https://github.com/MozillaReality/immersive-custom-elements", "description": "Set of web components for embedding immersive (VR & AR) content.", "stars": "134"}, {"name": "Joomla UI custom elements", "url": "https://github.com/joomla-projects/custom-elements", "description": "Compilation of Joomla 4 Custom Elements.", "stars": "31"}, {"name": "Ketch.UP", "url": "https://github.com/smeup/ketchup", "description": "Web components library for Sme.UP.", "stars": "11"}, {"name": "LDRS", "url": "https://github.com/GriffinJohnston/ldrs", "description": "Lightweight, customizable loading animations/spinners.", "stars": "2.1k"}, {"name": "Lion Web Components", "url": "https://github.com/ing-bank/lion", "description": "Set of highly performant, accessible and flexible Web Components.", "stars": "1.9k"}, {"name": "LRNWebComponents", "url": "https://github.com/elmsln/lrnwebcomponents/", "description": "ELMS:LN produced web components for any project.", "stars": "269"}, {"name": "Lume", "url": "https://github.com/lume/lume", "description": "Custom elements for 3D graphics. Built with Three.js for WebGL/WebGPU rendering, and Solid.js for reactivity and templating.", "stars": "1.5k"}, {"name": "Medblocks UI", "url": "https://github.com/medblocks/medblocks-ui", "description": "Web Components for rapid development of openEHR and FHIR systems.", "stars": "68"}, {"name": "Microsoft Graph Toolkit", "url": "https://github.com/microsoftgraph/microsoft-graph-toolkit", "description": "Collection of web components for the Microsoft Graph.", "stars": "1k"}, {"name": "Mutation testing elements", "url": "https://github.com/stryker-mutator/mutation-testing-elements", "description": "A schema for mutation testing results with the web components to visualize it.", "stars": "27"}, {"name": "Nightingale", "url": "https://github.com/ebi-webcomponents/nightingale", "description": "Data visualisation web components for the life sciences.", "stars": "143"}, {"name": "Nuxeo Elements", "url": "https://github.com/nuxeo/nuxeo-elements", "description": "Components for building web applications with Nuxeo using Web Components.", "stars": "27"}, {"name": "One Platform Components", "url": "https://github.com/1-Platform/op-components", "description": "Set of web components for Red Hat One Platform.", "stars": "31"}, {"name": "Open Business Application Platform Web Components", "url": "https://github.com/openbap/obap-elements", "description": "Collection of web components designed for business applications.", "stars": "14"}, {"name": "Pixano Elements", "url": "https://github.com/pixano/pixano-elements", "description": "Re-usable web components dedicated to data annotation tasks.", "stars": "42"}, {"name": "Playground Elements", "url": "https://github.com/PolymerLabs/playground-elements", "description": "Serverless code experiences with web components.", "stars": "640"}, {"name": "Shoelace", "url": "https://github.com/shoelace-style/shoelace", "description": "A forward-thinking library of web components.", "stars": "14k"}, {"name": "Smart Web Components", "url": "https://github.com/HTMLElements/smart-webcomponents", "description": "Web components for business applications.", "stars": "471"}, {"name": "Stripe Elements", "url": "https://github.com/bennypowers/stripe-elements", "description": "Custom Element Wrapper for Stripe.js v3 Elements.", "stars": "84"}, {"name": "TEI Publisher Components", "url": "https://github.com/eeditiones/tei-publisher-components", "description": "Collection of web components used by TEI Publisher and apps generated by it.", "stars": "18"}, {"name": "Titanium Elements", "url": "https://github.com/LeavittSoftware/titanium-elements", "description": "Collection of lightweight web components used by Leavitt Group Enterprises.", "stars": "19"}, {"name": "Tradeshift Elements", "url": "https://github.com/Tradeshift/elements", "description": "Reusable Tradeshift UI Components as Web Components.", "stars": "18"}, {"name": "TrendChart Elements", "url": "https://github.com/WebLogin/trendchart-elements", "description": "Components to generate simple, light and responsive charts.", "stars": "62"}, {"name": "Umbraco UI Components", "url": "https://github.com/umbraco/Umbraco.UI", "description": "Collection of user interface web components for Umbraco CMS.", "stars": "144"}, {"name": "Vaadin components", "url": "https://github.com/vaadin/web-components", "description": "Evolving set of high-quality web components for building business web applications.", "stars": "554"}, {"name": "VSCode Webview Elements", "url": "https://github.com/bendera/vscode-webview-elements", "description": "Components for creating VSCode extensions which use the Webview API.", "stars": "0"}, {"name": "Warp View", "url": "https://github.com/senx/warpview", "description": "Collection of charting web components for Warp 10.", "stars": "8"}, {"name": "Webmarkets web components", "url": "https://github.com/Webmarkets/wm-web-components", "description": "Set of Webmarkets' public web components.", "stars": "1"}, {"name": "Wired Elements", "url": "https://github.com/wiredjs/wired-elements", "description": "Set of common UI elements with a hand-drawn, sketchy look.", "stars": "11k"}, {"name": "Wokwi Elements", "url": "https://github.com/wokwi/wokwi-elements", "description": "Web Components for Arduino and various electronic parts.", "stars": "224"}, {"name": "XWeather", "url": "https://github.com/kherrick/x-weather", "description": "Collection of web components implementing portions of the OpenWeatherMap API.", "stars": "7"}]}, {"name": "Design Systems", "parent": "Real World", "entries": [{"name": "Astro Space UX Design System", "url": "https://github.com/RocketCommunicationsInc/astro", "description": "Set of components to build rich space app experiences with established interaction patterns.", "stars": "149"}, {"name": "Auro Design System", "url": "https://auro.alaskaair.com", "description": "Alaska Airlines design system to innovate on ideas and collaborate on the future."}, {"name": "Blueprint UI", "url": "https://blueprintui.dev", "description": "Web Component based design system with flexible and lightweight components."}, {"name": "Bolt Design System", "url": "https://github.com/boltdesignsystem/bolt", "description": "Twig and Web Component-powered UI components, reusable visual styles and tooling."}, {"name": "Calcite Components", "url": "https://github.com/Esri/calcite-components", "description": "Shared Web Components for Esri's Calcite design framework.", "stars": "346"}, {"name": "Carbon Web Components", "url": "https://github.com/carbon-design-system/carbon-web-components", "description": "Carbon Design System variant on top of Web Components.", "stars": "474"}, {"name": "Clarity Core Web Components", "url": "https://github.com/vmware-clarity/core/tree/main/projects/core", "description": "Suite of web components from the Clarity Design System.", "stars": "185"}, {"name": "Crayons", "url": "https://github.com/freshdesk/crayons", "description": "Collection of web components that adheres to the Freshworks Design System.", "stars": "236"}, {"name": "FAST Components", "url": "https://github.com/microsoft/fast/tree/master/packages/web-components", "description": "Library of Web Components based on the FAST design language.", "stars": "9.6k"}, {"name": "Fluent UI Web Components", "url": "https://github.com/microsoft/fluentui/tree/master/packages/web-components", "description": "Library of Web Components that supports Microsoft's Fluent design language.", "stars": "20k"}, {"name": "Forge Components", "url": "https://github.com/tyler-technologies-oss/forge", "description": "Library of Web Components adhering to the Forge Design System.", "stars": "64"}, {"name": "GOV.UK Web Components", "url": "https://github.com/tgreyuk/govuk-webcomponents", "description": "Set of encapsulated web components consuming the GOV.UK Design System.", "stars": "5"}, {"name": "Helix UI", "url": "https://github.com/HelixDesignSystem/helix-ui", "description": "Web Component library for the Helix Design System.", "stars": "64"}, {"name": "Liquid", "url": "https://github.com/emdgroup-liquid/liquid", "description": "UI component library based on the Liquid Design System.", "stars": "84"}, {"name": "Lyne Components", "url": "https://github.com/lyne-design-system/lyne-components", "description": "Building blocks of the Lyne Design System are based on Web Components.", "stars": "58"}, {"name": "Material Web Components", "url": "https://github.com/material-components/material-web", "description": "Material Design implemented as Web Components.", "stars": "11k"}, {"name": "Momentum UI Web Components", "url": "https://github.com/momentum-design/momentum-ui/tree/master/web-components", "description": "Set of UI components based on Momentum Design.", "stars": "212"}, {"name": "Nord", "url": "https://nordhealth.design", "description": "Nordhealth\u2019s design system for products, digital experiences and brand."}, {"name": "NuML | NUDE Elements", "url": "https://github.com/tenphi/numl", "description": "HTML Framework and Design System based on Web Components and runtime CSS generation.", "stars": "338"}, {"name": "OutlineJS", "url": "https://github.com/phase2/outline", "description": "Web component based design system starter kit.", "stars": "131"}, {"name": "PatternFly Elements", "url": "https://github.com/patternfly/patternfly-elements", "description": "Collection of flexible and lightweight Web Components based on the Unified Design Kit.", "stars": "389"}, {"name": "Pharos Design System", "url": "https://github.com/ithaka/pharos", "description": "JSTOR's design system to create cohesive, supportive, and beautiful experiences.", "stars": "129"}, {"name": "Red Hat Design System", "url": "https://github.com/RedHat-UX/red-hat-design-system", "description": "Web components for building uniform experiences with the Red Hat brand.", "stars": "135"}, {"name": "Siemens iX Web Components", "url": "https://github.com/siemens/ix/tree/main/packages/core", "description": "Web Components implementing Siemens iX design system.", "stars": "324"}, {"name": "Spectrum Web Components", "url": "https://github.com/adobe/spectrum-web-components", "description": "Adobe Spectrum design language implementation built with Web Components.", "stars": "1.5k"}, {"name": "UI5 Web Components", "url": "https://github.com/SAP/ui5-webcomponents", "description": "Set of reusable UI elements implementing SAP Fiori Design Guidelines.", "stars": "1.7k"}, {"name": "U-M Library Design System", "url": "https://design-system.lib.umich.edu", "description": "University of Michigan Library Design System."}, {"name": "Zooplus web components", "url": "https://github.com/zooplus/zoo-web-components", "description": "Set of web components that implement Z+ shop style guide.", "stars": "50"}]}, {"name": "Use Cases", "parent": "Real World", "entries": [{"name": "How we chose to build our Design System using StencilJS Web Components", "url": "https://medium.com/8451/how-we-chose-to-build-our-design-system-using-stenciljs-web-components-4878c36743c5", "description": ""}, {"name": "How searching for a bundle-free React led me to web components", "url": "https://www.bryanbraun.com/2020/08/31/how-searching-for-a-bundle-free-react-led-me-to-web-components/", "description": ""}, {"name": "Reasons Web Components are perfect for a big company", "url": "https://medium.com/@sergicontre/reasons-web-components-are-perfect-for-a-big-company-28790d712ad5", "description": ""}, {"name": "5 Reasons Web Components Are Perfect for Design Systems", "url": "https://ionicframework.com/blog/5-reasons-web-components-are-perfect-for-design-systems/", "description": ""}, {"name": "Web components: the secret ingredient helping power the web", "url": "https://web.dev/web-components-io-2019/", "description": ""}, {"name": "Web Components for Enterprise. Part 1: Salesforce, Oracle, SAP", "url": "https://dev.to/webpadawan/web-components-for-enterprise-part-1-salesforce-oracle-sap-e70", "description": ""}, {"name": "Web Components for Enterprise. Part 2: Nuxeo, Ionic, Vaadin", "url": "https://dev.to/webpadawan/web-components-for-enterprise-part-2-nuxeo-ionic-vaadin-22l7", "description": ""}, {"name": "Why I use Web Components - My use cases", "url": "https://dev.to/shihn/why-i-use-web-components-my-use-cases-1nip", "description": ""}, {"name": "Why we use Web Components", "url": "https://viljamis.com/2019/why-we-use-web-components/", "description": ""}, {"name": "Why we use Web Components", "url": "https://dev.to/ionic/why-we-use-web-components-2c1i", "description": ""}]}, {"name": "Class Based", "parent": "Libraries", "entries": [{"name": "DNA", "url": "https://github.com/chialab/dna", "description": "Progressive Web Components library.", "stars": "59"}, {"name": "element-js", "url": "https://github.com/webtides/element-js", "description": "Simple and lightweight base classes for web components with a beautiful API.", "stars": "30"}, {"name": "FAST Element", "url": "https://github.com/microsoft/fast/tree/master/packages/web-components/fast-element", "description": "Lightweight library for building performant, memory-efficient, standards-compliant Web Components.", "stars": "9.6k"}, {"name": "Forge Core", "url": "https://github.com/tyler-technologies-oss/forge-core", "description": "Building blocks and utilities that are used when building Forge Web Components.", "stars": "7"}, {"name": "Joist", "url": "https://github.com/joist-framework/joist", "description": "Set of small libraries designed to add the bare minimum to web components to make you productive.", "stars": "135"}, {"name": "Lit", "url": "https://lit.dev", "description": "Simple library for building fast, lightweight web components."}, {"name": "Lightning Web Components", "url": "https://github.com/salesforce/lwc", "description": "blazing fast, enterprise-grade Web Components foundation.", "stars": "1.8k"}, {"name": "Lume Element", "url": "https://github.com/lume/element", "description": "Write custom elements with reactivity and templating powered by Solid.js signals and effects.", "stars": "184"}, {"name": "Omi", "url": "https://github.com/Tencent/omi", "description": "Next generation web framework in 4kb JavaScript (Web Components + JSX + Proxy + Store + Path Updating).", "stars": "13k"}, {"name": "Panel", "url": "https://github.com/mixpanel/panel", "description": "Web Components + Virtual DOM: web standards for powerful UIs.", "stars": "277"}, {"name": "ReadyMade", "url": "https://github.com/readymade-ui/readymade/tree/main/src/modules/core", "description": "Write custom element classes with decorators. No dependencies.", "stars": "67"}, {"name": "slim.js", "url": "https://github.com/slimjs/slim.js", "description": "Fast & Robust Front-End Micro-framework based on modern standards.", "stars": "1k"}, {"name": "Stencil", "url": "https://github.com/ionic-team/stencil", "description": "Compiler for generating Web Components.", "stars": "13k"}, {"name": "Tonic", "url": "https://github.com/optoolco/tonic", "description": "Minimalist, stable, audit friendly component framework.", "stars": "889"}, {"name": "WebCell", "url": "https://github.com/EasyWebApp/WebCell", "description": "Web Components engine based on VDOM, JSX, MobX & TypeScript.", "stars": "179"}]}, {"name": "Functional", "parent": "Libraries", "entries": [{"name": "atomico", "url": "https://github.com/atomicojs/atomico", "description": "Small library for the creation of interfaces based on web components using functions and hooks.", "stars": "1.3k"}, {"name": "Elemento", "url": "https://github.com/dsolimando/elemento", "description": "A lightweight library for building functional web components using signals and Lit.", "stars": "7"}, {"name": "haunted", "url": "https://github.com/matthewp/haunted", "description": "React's Hooks API implemented for web components.", "stars": "2.7k"}, {"name": "hybrids", "url": "https://github.com/hybridsjs/hybrids", "description": "UI library for creating Web Components with simple and functional API.", "stars": "3.2k"}, {"name": "Solid Element", "url": "https://github.com/solidjs/solid/tree/main/packages/solid-element", "description": "Library that extends Solid adding Custom Web Components and extensions.", "stars": "35k"}]}, {"name": "Integrations", "parent": "Libraries", "entries": [{"name": "ember-custom-elements", "url": "https://github.com/Ravenstine/ember-custom-elements", "description": "Render Ember and Glimmer components using custom elements.", "stars": "15"}, {"name": "preact-custom-element", "url": "https://github.com/preactjs/preact-custom-element", "description": "Generate/register a custom element from a preact component.", "stars": "400"}, {"name": "@adobe/react-webcomponent", "url": "https://github.com/adobe/react-webcomponent", "description": "Automate the wrapping of a React component in a custom element.", "stars": "104"}, {"name": "nuxt-custom-elements", "url": "https://github.com/GrabarzUndPartner/nuxt-custom-elements", "description": "Export your project components as custom elements for integration into external pages.", "stars": "83"}, {"name": "react-shadow", "url": "https://github.com/Wildhoney/ReactShadow", "description": "Utilise Shadow DOM in React with all the benefits of style encapsulation.", "stars": "1.4k"}, {"name": "reactify-wc", "url": "https://github.com/BBKolton/reactify-wc", "description": "Use web components with React properties and functions.", "stars": "178"}, {"name": "remount", "url": "https://github.com/rstacruz/remount", "description": "Mount React components to the DOM using custom elements.", "stars": "724"}, {"name": "@riotjs/custom-elements", "url": "https://github.com/riot/custom-elements", "description": "Simple API to create vanilla custom elements with Riot.js.", "stars": "39"}]}, {"name": "Benchmarks", "parent": "Libraries", "entries": [{"name": "All the Ways to Make a Web Component", "url": "https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/", "description": ""}, {"name": "web-components-benchmark", "url": "https://vogloblinsky.github.io/web-components-benchmark/", "description": "Benchmark Web Components technologies with various examples."}, {"name": "web-components-todo", "url": "https://wc-todo.firebaseapp.com/", "description": "The same todo application built in different Web Components libraries for benchmark purpose."}]}, {"name": "Angular", "parent": "Frameworks", "entries": [{"name": "Angular Elements Overview", "url": "https://angular.io/guide/elements", "description": ""}, {"name": "Building and consuming Angular Elements as Web Components", "url": "https://indepth.dev/building-and-bundling-web-components/", "description": ""}, {"name": "How to use Angular ngModel and ngForms with WebComponents", "url": "https://itnext.io/how-to-use-angular-ngmodel-and-ngforms-with-webcomponents-802bd9e1d3d7", "description": ""}, {"name": "Using Web Components in Angular", "url": "https://coryrylan.com/blog/using-web-components-in-angular", "description": ""}, {"name": "Web Components With Angular Ivy In 6 Steps", "url": "https://www.softwarearchitekt.at/post/2019/05/18/web-components-custom-elements-with-angular-ivy-in-6-steps.aspx", "description": ""}]}, {"name": "React", "parent": "Frameworks", "entries": [{"name": "3 Approaches to Integrate React with Custom Elements", "url": "https://css-tricks.com/3-approaches-to-integrate-react-with-custom-elements/", "description": ""}, {"name": "Building Interoperable Web Components That Even Work With React", "url": "https://css-tricks.com/building-interoperable-web-components-react/", "description": ""}, {"name": "Rendering React Components With Custom Elements", "url": "https://guillaumebriday.fr/rendering-react-components-with-custom-elements", "description": ""}, {"name": "How to use Web Components in React", "url": "https://www.robinwieruch.de/react-web-components", "description": ""}, {"name": "Using Web Components With Next (or Any SSR Framework)", "url": "https://css-tricks.com/using-web-components-with-next-or-any-ssr-framework/", "description": ""}]}, {"name": "Vue", "parent": "Frameworks", "entries": [{"name": "Using Web Components in Vue", "url": "https://coryrylan.com/blog/using-web-components-in-vue", "description": ""}]}, {"name": "Svelte", "parent": "Frameworks", "entries": [{"name": "Svelte Custom Element API", "url": "https://svelte.dev/docs#Custom_element_API", "description": ""}, {"name": "How to Create a Web Component in Svelte", "url": "https://dev.to/silvio/how-to-create-a-web-components-in-svelte-2g4j", "description": ""}, {"name": "Svelte Web Component \u2014 5.4KB", "url": "https://itnext.io/svelte-web-component-5-4kb-4afe46590d99", "description": ""}, {"name": "AMP", "url": "https://github.com/ampproject/amphtml", "description": "Web component framework to easily create user-first experiences for the web.", "stars": "15k"}, {"name": "Enhance", "url": "https://enhance.dev/docs/", "description": "Web standards-based HTML framework for building lightweight web applications."}, {"name": "luna-js", "url": "https://github.com/webtides/luna-js", "description": "SSR framework that makes working with the WebComponents standard a breeze.", "stars": "10"}, {"name": "Rocket", "url": "https://rocket.modern-web.dev", "description": "Modern web setup for static sites with a sprinkle of JavaScript."}, {"name": "Web Components Compiler", "url": "https://github.com/ProjectEvergreen/wcc", "description": "Compiler to make server-side rendering of native web components easier.", "stars": "120"}, {"name": "WebC", "url": "https://github.com/11ty/webc", "description": "Framework-independent standalone HTML serializer for generating markup for web components.", "stars": "1.4k"}]}, {"name": "Starter Kits", "parent": "Meta Frameworks", "entries": [{"name": "Create Open Web Components", "url": "https://open-wc.org/docs/development/generator/", "description": "Web component project scaffolding."}, {"name": "custom-element-boilerplate", "url": "https://github.com/github/custom-element-boilerplate", "description": "Boilerplate for creating a custom element.", "stars": "176"}, {"name": "hello-web-components", "url": "https://github.com/fernandopasik/hello-web-components", "description": "Simple starter hello world web component written in TypeScript.", "stars": "31"}, {"name": "nutmeg", "url": "https://github.com/abraham/nutmeg", "description": "Build, test, and publish vanilla Web Components with a little spice.", "stars": "117"}]}, {"name": "Testing Solutions", "parent": "Meta Frameworks", "entries": [{"name": "capybara-shadowdom", "url": "https://github.com/yuki24/capybara-shadowdom", "description": "Ruby gem that adds basic support for the Shadow DOM to Capybara.", "stars": "15"}, {"name": "Cypress component tests for Lit", "url": "https://dev.to/simonireilly/cypress-component-tests-for-lit-elements-web-components-45oj", "description": "How to run component tests for a Lit web component with Cypress."}, {"name": "cypress-lit", "url": "https://github.com/simonireilly/cypress-lit", "description": "Test your Lit elements and native web components in Cypress with all the modern browsers.", "stars": "25"}, {"name": "Developing Components: Testing", "url": "https://open-wc.org/guides/developing-components/testing/", "description": "Using @web/test-runner for testing web components in a real browser."}, {"name": "How To Automate Shadow DOM In Selenium WebDriver", "url": "https://www.lambdatest.com/blog/shadow-dom-in-selenium/", "description": "Locating Shadow DOM elements using Selenium WebDriver in a Maven project."}, {"name": "Native Automation support for Shadow DOM", "url": "https://staleelement.medium.com/native-automation-support-for-shadow-dom-with-webdriverio-and-cypress-chapter-3-26249a589f5e", "description": "Shadow DOM and open-source testing frameworks."}, {"name": "Open Web Components: Testing", "url": "https://open-wc.org/docs/testing/testing-package/", "description": "Opinionated package that combines and configures testing libraries."}, {"name": "query-selector-shadow-dom", "url": "https://github.com/webdriverio/query-selector-shadow-dom", "description": "querySelector that can pierce Shadow DOM roots, useful for automated testing.", "stars": "260"}, {"name": "shadow-automation-selenium", "url": "https://github.com/sukgu/shadow-automation-selenium", "description": "Shadow DOM automation using Selenium.", "stars": "116"}, {"name": "Testing Shadow DOM elements in Selenium", "url": "https://reflect.run/articles/testing-shadow-dom-elements-in-selenium/", "description": "In Selenium 4, there is now a way to access Shadow DOM nodes."}, {"name": "Test web components with Playwright", "url": "https://alexbilson.dev/plants/technology/test-web-components-with-playwright/", "description": "So you\u2019ve created a native web component or two. How do you test them in popular browsers?"}, {"name": "W3C Webdriver conquering automation of Shadow DOM", "url": "https://staleelement.medium.com/w3c-webdriver-conquering-automation-of-shadow-dom-chapter-2-d92c7fe9e74c", "description": "Shadow DOM tree and its interaction with the W3C Webdriver."}]}, {"name": "Tools", "parent": "Meta Frameworks", "entries": [{"name": "Backlight", "url": "https://backlight.dev/", "description": "With collaboration between developers and designers at heart, Backlight is a very complete coding platform where teams build, document, publish, scale and maintain Design Systems."}, {"name": "Custom Elements Locator", "url": "https://github.com/open-wc/locator", "description": "Chrome extension to find custom elements on a page.", "stars": "38"}, {"name": "@storybook/web-components", "url": "https://www.npmjs.com/package/@storybook/web-components", "description": "UI development environment for plain web-component snippets."}, {"name": "webcomponents.dev", "url": "https://webcomponents.dev", "description": "Component IDE for web platform developers."}, {"name": "web-component-analyzer", "url": "https://github.com/runem/web-component-analyzer", "description": "CLI that analyzes web components and emits documentation / diagnostics.", "stars": "516"}, {"name": "Web Components Codemods", "url": "https://github.com/kcmr/web-components-codemods", "description": "Codemods for Web Components.", "stars": "10"}, {"name": "Web Components in Action", "url": "https://www.manning.com/books/web-components-in-action", "description": "Book by Ben Farrell, available at Manning early release program."}, {"name": "Web Component Essentials", "url": "https://leanpub.com/web-component-essentials", "description": "Book by Cory Rylan, early preview edition available at Leanpub."}, {"name": "Building Web Components with Vanilla JavaScript", "url": "https://dev.to/aspittel/building-web-components-with-vanilla-javascript--jho", "description": ""}, {"name": "Creating a Custom Element from Scratch", "url": "https://css-tricks.com/creating-a-custom-element-from-scratch/", "description": ""}, {"name": "Creating a Reusable Avatar Web Component", "url": "https://marcoslooten.com/blog/creating-a-reusable-avatar-web-component/", "description": ""}, {"name": "Creating Web Components with Stencil", "url": "https://auth0.com/blog/creating-web-components-with-stencil/", "description": ""}, {"name": "Encapsulating Style and Structure with Shadow DOM", "url": "https://css-tricks.com/encapsulating-style-and-structure-with-shadow-dom/", "description": ""}, {"name": "Getting started with LitElement and TypeScript", "url": "https://labs.thisdot.co/blog/getting-started-with-litelement-and-typescript", "description": ""}, {"name": "Web Components: from zero to hero", "url": "https://dev.to/thepassle/web-components-from-zero-to-hero-4n4m", "description": ""}, {"name": "Deep Dive: Web Components & Dependency Injection \u2013 The Experiment", "url": "https://www.thinktecture.com/web-components/dependency-injection/", "description": ""}, {"name": "Handling data with Web Components", "url": "https://itnext.io/handling-data-with-web-components-9e7e4a452e6e", "description": ""}, {"name": "How to use D3js with WebComponents", "url": "https://towardsdatascience.com/how-to-use-d3js-with-webcomponents-a75ae4f980de", "description": ""}, {"name": "Navigation Lifecycle using Vaadin Router, LitElement and TypeScript", "url": "https://labs.thisdot.co/blog/navigation-lifecycle-using-vaadin-router-litelement-and-typescript", "description": ""}, {"name": "Recreating The Arduino Pushbutton Using SVG And `<lit-element>`", "url": "https://www.smashingmagazine.com/2020/01/recreating-arduino-pushbutton-svg/", "description": ""}, {"name": "Routing Management with LitElement and TypeScript", "url": "https://labs.thisdot.co/blog/routing-management-with-litelement", "description": ""}, {"name": "Snake-Eating Game Making with Web Components of Omi and MVP Architecture", "url": "https://dev.to/dntzhang/snake-eating-game-making-with-web-components-of-omi-and-mvp-architecture-206", "description": ""}, {"name": "Stencil \u2013 Web Components On Steroids", "url": "https://www.thinktecture.com/web-components/stenciljs-web-components-on-steroids/", "description": ""}, {"name": "Using Modern Web Components", "url": "https://coryrylan.com/blog/using-modern-web-components", "description": ""}, {"name": "Using Web Components in WordPress is Easier Than You Think", "url": "https://css-tricks.com/using-web-components-in-wordpress-is-easier-than-you-think/", "description": ""}, {"name": "Web Components 101: Framework Comparison", "url": "https://coderpad.io/blog/development/web-components-101-framework-comparison/", "description": ""}, {"name": "Web Components 101: Lit Framework", "url": "https://coderpad.io/blog/development/web-components-101-lit-framework/", "description": ""}, {"name": "Web Components Tools: A Comparison", "url": "https://www.nexmo.com/blog/2020/05/20/web-components-tools-a-comparison", "description": ""}, {"name": "Where to begin building Web Components? - The Basics", "url": "https://dev.to/alangdm/where-to-begin-building-web-components-the-basics-3b78", "description": ""}, {"name": "Where to begin building Web Components? - Class-based Libraries", "url": "https://dev.to/alangdm/where-to-begin-building-web-components-class-based-libraries-18m6", "description": ""}]}, {"name": "Podcasts", "parent": "Insights", "entries": [{"name": "Code\\[ish\\], episode 38: Building with Web Components", "url": "https://www.heroku.com/podcasts/codeish/38-building-with-web-components", "description": ""}, {"name": "Frontend Happy Hour, episode 62: Web Components - shots of shadow DOM", "url": "https://frontendhappyhour.com/episodes/web-components-shots-of-shadow-dom/", "description": ""}, {"name": "Labs Talk - Web Components with Peter Muessig", "url": "https://labstalk.buzzsprout.com/993481/3932975-web-components-with-peter-muessig", "description": ""}, {"name": "Real Talk JavaScript, episode 7: Custom Web Components with Rob Wormald", "url": "https://realtalkjavascript.simplecast.fm/eaf3db9e", "description": ""}, {"name": "Real Talk JavaScript, episode 101: Back to Basics with Native HTML and LitElement", "url": "https://realtalkjavascript.simplecast.com/episodes/episode-101-back-to-basics-with-native-html-and-litelement", "description": ""}]}, {"name": "Presentations", "parent": "Insights", "entries": [{"name": "Are Web Components the Betamax of web development?", "url": "https://noti.st/lostinbrittany/EjUZyd/are-web-components-the-betamax-of-web-development", "description": ""}, {"name": "Designing Standard Systems", "url": "https://drive.google.com/file/d/1ALFiWOFU0UAGUpaZPMIVnoADs9_REtL5/view", "description": ""}, {"name": "Frontend Architecture for Scalable Design Systems", "url": "https://events.drupal.org/seattle2019/sessions/design-system-architecture-pattern-lab-twig-and-web-components", "description": ""}, {"name": "lit-apollo: Data-Driven Components that Use the Platform", "url": "https://apolloelements.dev/using-lit-apollo/", "description": ""}, {"name": "Mastering Shadow DOM", "url": "https://martine-dowden.github.io/portfolio/presentation/mastering-shadow-dom", "description": ""}, {"name": "Modernizing Large Frontends with Web Components", "url": "https://speakerdeck.com/samjulien/modernizing-large-frontends-with-web-components", "description": ""}, {"name": "Shadow DOM: off the beaten track", "url": "https://docs.google.com/presentation/d/1wi74YiTLtLSfgjyccKm5LxYp9k8aeJda0AekWV5mqJI/edit?usp=sharing", "description": ""}, {"name": "Using Web Components to Build a Framework-agnostic UI Library", "url": "https://gotochgo.com/2019/sessions/866/using-web-components-to-build-a-framework-agnostic-ui-library", "description": ""}, {"name": "Web Components and the AOM", "url": "https://decks.tink.uk/2019/jsconf/index.html", "description": ""}, {"name": "Web Components and Styles Scoping", "url": "https://www.dropbox.com/s/wdh9uufjui5htll/Web-Components-and-Styles-Scoping-by-bashmish-FrontMania-2018.pdf", "description": ""}, {"name": "Web Components can do that?!", "url": "https://slides.com/vogloblinsky/web-components-can-do-that", "description": ""}, {"name": "Web Components: Introduction and State of the Art", "url": "https://webcomponents.dev/blog/web-components-slides/", "description": ""}]}, {"name": "Talks", "parent": "Insights", "entries": [{"name": "Better Apps: Delivering Universal UI Patterns as Web Components", "url": "https://youtu.be/mtHf7crZZIQ", "description": ""}, {"name": "Custom Web Shadow Elements, or Whatever\u2026", "url": "https://vimeo.com/364370506", "description": ""}, {"name": "Styling and Theming Web Components", "url": "https://youtu.be/FM7ROEVPA4k", "description": ""}, {"name": "Web Components at Enterprise Scale", "url": "https://youtu.be/iFp-P2UJT_Y", "description": ""}, {"name": "Chrome Platform Status: `CustomElementRegistryDefine`", "url": "https://chromestatus.com/metrics/feature/timeline/popularity/1689", "description": ""}, {"name": "Chrome Platform Status: `ElementAttachShadow`", "url": "https://chromestatus.com/metrics/feature/timeline/popularity/804", "description": ""}, {"name": "Chrome Platform Status: `HTMLTemplateElement`", "url": "https://chromestatus.com/metrics/feature/timeline/popularity/2769", "description": ""}]}, {"name": "Form-associated Custom Elements", "parent": "Proposals", "entries": [{"name": "Form Participation API Explained", "url": "https://docs.google.com/document/d/1JO8puctCSpW-ZYGU8lF-h4FWRIDQNDVexzHoOQ2iQmY/edit?usp=sharing", "description": "Document by Google Chrome team."}, {"name": "Form-associated custom elements", "url": "https://www.chromestatus.com/features/4708990554472448", "description": "Feature in Chrome platform status."}, {"name": "web-platform-tests", "url": "https://github.com/web-platform-tests/wpt/tree/master/custom-elements/form-associated", "description": "", "stars": "5.8k"}]}, {"name": "Constructable Stylesheet Objects", "parent": "Proposals", "entries": [{"name": "Specification Draft", "url": "https://wicg.github.io/construct-stylesheets/", "description": ""}, {"name": "web-platform-tests", "url": "https://github.com/web-platform-tests/wpt/blob/master/css/cssom/CSSStyleSheet-constructable.html", "description": "", "stars": "5.8k"}, {"name": "Explainer", "url": "https://github.com/WICG/construct-stylesheets/blob/gh-pages/explainer.md", "description": "", "stars": "137"}, {"name": "Constructable Stylesheets", "url": "https://www.chromestatus.com/feature/5394843094220800", "description": "Feature in Chrome platform status."}]}, {"name": "Custom State Pseudo Class", "parent": "Proposals", "entries": [{"name": "Blink: Intent to implement", "url": "https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/CApU9QIu3TM", "description": ""}, {"name": "`ElementInternals`'s `states` property and the `:state()` pseudo class", "url": "https://github.com/w3c/webcomponents/blob/gh-pages/proposals/custom-states-and-state-pseudo-class.md", "description": ""}, {"name": "bruck", "url": "https://github.com/Heydon/bruck", "description": "Prototyping system built with web components and the Houdini Paint API.", "stars": "515"}, {"name": "Vaadin Directory", "url": "https://vaadin.com/directory", "description": "Publish, discuss and rate web components"}, {"name": "webcomponents.org", "url": "http://webcomponents.org/", "description": "Discuss & share web components."}]}, {"name": "Polyfills", "parent": "Archive", "entries": [{"name": "@webcomponents/custom-elements", "url": "https://github.com/webcomponents/polyfills/tree/master/packages/custom-elements", "description": "Custom Elements polyfill by Polymer team.", "stars": "1.2k"}, {"name": "document-register-element", "url": "https://github.com/WebReflection/document-register-element", "description": "Custom Elements polyfill by Andrea Giammarchi.", "stars": "1.1k"}, {"name": "@corpuscule/custom-builtin-elements", "url": "https://github.com/corpusculejs/custom-builtin-elements", "description": "Customized built-in elements polyfill by [CorpusculeJS](https://github.com/corpusculejs).", "stars": "11"}, {"name": "@ungap/custom-elements-builtin", "url": "https://github.com/ungap/custom-elements-builtin", "description": "Customized built-in elements polyfill by [ungap project](https://ungap.github.io).", "stars": "103"}, {"name": "@webcomponents/shadydom", "url": "https://github.com/webcomponents/polyfills/tree/master/packages/shadydom", "description": "ShadowDOM v1 shim.", "stars": "1.2k"}, {"name": "@webcomponents/shadycss", "url": "https://github.com/webcomponents/polyfills/tree/master/packages/shadycss", "description": "ShadowDOM style encapsulation shim.", "stars": "1.2k"}, {"name": "@lwc/synthetic-shadow", "url": "https://github.com/salesforce/lwc/blob/master/packages/@lwc/synthetic-shadow", "description": "Shadow DOM polyfill by [LWC](https://lwc.dev).", "stars": "1.8k"}, {"name": "@webcomponents/template", "url": "https://github.com/webcomponents/polyfills/tree/master/packages/template", "description": "Minimal polyfill for `<template>`.", "stars": "1.2k"}, {"name": "@ungap/import-node", "url": "https://github.com/ungap/import-node", "description": "An `importNode` polyfill for IE11 by [ungap project](https://ungap.github.io).", "stars": "7"}]}, {"name": "History", "parent": "Archive", "entries": [{"name": "A history of the HTML slot element", "url": "https://component.kitchen/blog/posts/a-history-of-the-html-slot-element", "description": ""}, {"name": "Web Components for Cross-Framework Component Libraries", "url": "https://codeburst.io/web-components-for-cross-framework-component-libraries-2647741f9470", "description": ""}, {"name": "Web Components in 2019: Part 1", "url": "https://codeburst.io/web-components-in-2019-part-1-6bd7251edce5", "description": ""}, {"name": "Web Components in 2019: Part 2", "url": "https://codeburst.io/web-components-in-2019-part-2-a7de8c770c5a", "description": ""}, {"name": "Web Components in 2019: Part 3", "url": "https://codeburst.io/web-components-in-2019-part-3-e725b781a414", "description": ""}, {"name": "Web Components in 2019: Part 4", "url": "https://codeburst.io/web-components-in-2019-part-4-7fe8e63a4dee", "description": ""}, {"name": "Developments in Web Components I\u2019m excited about in 2019", "url": "https://medium.com/angular-in-depth/developments-in-web-components-im-excited-about-in-2019-3ae7751c2f64", "description": ""}, {"name": "Styling Accessibility: A Web Components Approach", "url": "https://medium.com/@cfscorreia/styling-accessibility-a-web-components-approach-dc2aa8123eb2", "description": ""}, {"name": "Web Components 101: An Introduction to Web Components", "url": "https://www.telerik.com/blogs/web-components-101-an-introduction-to-web-components", "description": ""}, {"name": "Get started with Vue web components", "url": "https://medium.com/@royprins/get-started-with-vue-web-components-593b3d5b3200", "description": ""}, {"name": "6 Reasons You Should Use Native Web Components", "url": "https://codeburst.io/6-reasons-you-should-use-native-web-components-b45e18e069c2", "description": ""}, {"name": "Web Components in 2018", "url": "https://www.sitepen.com/blog/web-components-in-2018", "description": ""}, {"name": "Web Components Introduction: Creating Custom HTML Elements in 2018", "url": "https://www.grapecity.com/en/blogs/web-components-introduction-creating-custom-html-elements-2018", "description": ""}, {"name": "Create & Publish Web Components With Vue CLI 3", "url": "https://vuejsdevelopers.com/2018/05/21/vue-js-web-component/", "description": ""}, {"name": "Extending Native DOM Elements with Web Components", "url": "https://medium.com/revillweb/extending-native-dom-elements-with-web-components-233350c8e86a", "description": ""}, {"name": "Styling is critical to web component reuse, but may prove difficult in practice", "url": "https://component.kitchen/blog/posts/styling-is-critical-to-web-component-reuse-but-may-prove-difficult-in-practice", "description": ""}, {"name": "Web Components: The Long Game", "url": "https://infrequently.org/2017/10/web-components-the-long-game/", "description": ""}, {"name": "Web Components: Just in the Nick of Time (Polymer Summit 2017)", "url": "https://youtu.be/y-8Lmg5Gobw", "description": ""}, {"name": "Using Web Components in Ionic (Polymer Summit 2017)", "url": "https://youtu.be/UfD-k7aHkQE", "description": ""}, {"name": "Web Components for VR (Polymer Summit 2017)", "url": "https://youtu.be/8GmTu2JF4-0", "description": ""}, {"name": "Building UI at Enterprise Scale with Web Components (Polymer Summit 2017)", "url": "https://youtu.be/FJ2KEvzlyo4", "description": ""}, {"name": "Custom Elements Everywhere (Polymer Summit 2017)", "url": "https://youtu.be/sK1ODp0nDbM", "description": ""}, {"name": "Evolving the Next Generation of Polymer Elements (Polymer Summit 2017)", "url": "https://youtu.be/rvpJ5O0W_6A", "description": ""}, {"name": "Polymer @ YouTube (Polymer Summit 2017)", "url": "https://youtu.be/tNulrEbTQf8", "description": ""}, {"name": "Web Components for CMS (Polymer Summit 2017)", "url": "https://youtu.be/c-WDHG6rrdU", "description": ""}, {"name": "An intro to web components with otters", "url": "https://meowni.ca/posts/web-components-with-otters/", "description": ""}, {"name": "The broken promise of Web Components", "url": "https://dmitriid.com/blog/2017/03/the-broken-promise-of-web-components/", "description": ""}, {"name": "Regarding the broken promise of Web Components", "url": "http://robdodson.me/regarding-the-broken-promise-of-web-components/", "description": ""}, {"name": "Web Components v1 - the next generation", "url": "https://web.dev/webcomponents-org/", "description": ""}, {"name": "Introducing Custom Elements", "url": "https://webkit.org/blog/7027/introducing-custom-elements/", "description": ""}, {"name": "The Case for Custom Elements: Part 1", "url": "https://medium.com/dev-channel/the-case-for-custom-elements-part-1-65d807b4b439", "description": ""}, {"name": "The Case for Custom Elements: Part 2", "url": "https://medium.com/dev-channel/the-case-for-custom-elements-part-2-2efe42ce9133", "description": ""}, {"name": "Demythstifying Web Components", "url": "http://www.backalleycoder.com/2016/08/26/demythstifying-web-components/", "description": ""}, {"name": "Extensible web components", "url": "https://adactio.com/journal/11052", "description": ""}, {"name": "Web Component Challenges", "url": "https://blog.revillweb.com/web-component-challenges-a09ebc598d65", "description": ""}, {"name": "Web Components and progressive enhancement", "url": "https://onishi.ltd/articles/2016/08/web-components-and-progressive-enhancement/", "description": ""}, {"name": "Update on standardizing Shadow DOM and Custom Elements", "url": "https://annevankesteren.nl/2015/07/shadow-dom-custom-elements-update", "description": ""}, {"name": "What's New in Shadow DOM v1 (by examples)", "url": "https://hayatoito.github.io/2016/shadowdomv1/", "description": ""}, {"name": "Why web components are so important", "url": "https://blog.revillweb.com/why-web-components-are-so-important-66ad0bd4807a", "description": ""}, {"name": "Understanding Web Components", "url": "https://medium.com/the-ui-files/understanding-web-components-d051baa66019", "description": ""}, {"name": "Introducing Slot-Based Shadow DOM API", "url": "https://webkit.org/blog/4096/introducing-shadow-dom-api/", "description": ""}, {"name": "There is an Element for that", "url": "https://medium.com/synsugar/there-is-an-element-for-that-a9fcdafe4a25", "description": ""}, {"name": "What happened to Web Components?", "url": "https://2ality.com/2015/08/web-component-status.html", "description": ""}, {"name": "Web Components and their role in the future of web development", "url": "http://kaytcat.github.io/web-components/", "description": ""}, {"name": "Microsoft Edge and Web Components", "url": "https://blogs.windows.com/msedgedev/2015/07/15/microsoft-edge-and-web-components/", "description": ""}, {"name": "Bringing componentization to the web: An overview of Web Components", "url": "https://blogs.windows.com/msedgedev/2015/07/14/bringing-componentization-to-the-web-an-overview-of-web-components/", "description": ""}, {"name": "Why Web Components will make the web a better place for our users", "url": "https://medium.com/@kaelig/why-web-components-will-make-the-web-a-better-place-for-our-users-38dc3154fc1d", "description": ""}, {"name": "Practical Questions around Web Components", "url": "https://www.ianfeather.co.uk/practical-questions-around-web-components/", "description": ""}, {"name": "The state of Web Components", "url": "https://hacks.mozilla.org/2015/06/the-state-of-web-components/", "description": ""}, {"name": "A No-Nonsense Guide to Web Components, Part 1: The Specs", "url": "http://cbateman.com/blog/a-no-nonsense-guide-to-web-components-part-1-the-specs/", "description": ""}, {"name": "A No-Nonsense Guide to Web Components, Part 2: Practical Use", "url": "http://cbateman.com/blog/a-no-nonsense-guide-to-web-components-part-2-practical-use/", "description": ""}, {"name": "Web Components + Backbone: A Game-Changing Combination", "url": "https://youtu.be/dztuKgjk0Bg", "description": ""}, {"name": "Mozilla and Web Components: Update", "url": "https://hacks.mozilla.org/2014/12/mozilla-and-web-components/", "description": ""}, {"name": "Server-less applications powered by Web Components", "url": "https://youtu.be/MdcD1rNkNLE", "description": ""}, {"name": "Web Components and the Future of CSS", "url": "https://youtu.be/QHxrr6Q82yI", "description": ""}, {"name": "Easy composition and reuse with Web Components", "url": "https://youtu.be/6vcQlD-jadk", "description": ""}, {"name": "Let\u2019s build some apps with Polymer!", "url": "https://youtu.be/kV0hgdMpH28", "description": ""}, {"name": "Polymer: State of the Union", "url": "https://youtu.be/0LT6W5QVCJI", "description": ""}, {"name": "Web Components 101: An Introduction to Fundamental Changes in HTML", "url": "https://youtu.be/hEzmy93zr0Y?t=540", "description": ""}, {"name": "Web Components 201: Designing Web Components for Reuse", "url": "https://youtu.be/dwxaG-eoxdU", "description": ""}, {"name": "Why Web Components \u2014 Does the Web Really Need Another Component?", "url": "https://medium.com/@shaunwalla/why-web-components-does-the-web-really-need-another-component-4af010b6446", "description": ""}, {"name": "\u201cDon\u2019t stop thinking about tomorrow\u201d - AngularJS and Web Components", "url": "https://youtu.be/gSTNTXtQwaY", "description": ""}, {"name": "Multi-device Apps with Web Components", "url": "https://youtu.be/kn0y7uugO0Y", "description": ""}, {"name": "As I Walk Through The Valley Of The Shadow Of DOM", "url": "https://youtu.be/nbsWP2cPhhU", "description": ""}, {"name": "Why Web Components Are Ready For Production", "url": "https://www.telerik.com/blogs/web-components-ready-production", "description": ""}, {"name": "The State of the Componentised Web", "url": "https://www.leggetter.co.uk/2014/08/06/state-componentised-web.html", "description": ""}, {"name": "An Addendum to Why Web Components Aren't Ready for Production Yet", "url": "https://www.tjvantoll.com/2014/07/18/an-addendum-to-why-web-components-arent-ready-for-production-yet/", "description": ""}, {"name": "Why Web Components Aren't Ready for Production... Yet", "url": "https://www.telerik.com/blogs/web-components-arent-ready-production-yet", "description": ""}, {"name": "Component Interop With React And Custom Elements", "url": "https://addyosmani.com/blog/component-interop-with-react-and-custom-elements/", "description": ""}, {"name": "Accessibility of Web Components", "url": "https://youtu.be/BgvDZZ8Ms8c", "description": ""}, {"name": "Componentize The Web: Back To The Browser!", "url": "https://youtu.be/GOPXVLxp9Nc", "description": ""}, {"name": "Google I/O 2014 - Polymer and the Web Components revolution", "url": "https://youtu.be/yRbOSdAe_JU", "description": ""}, {"name": "Google I/O 2014 - Polymer and Web Components change everything you know about Web development", "url": "https://youtu.be/8OJ7ih8EE7s", "description": ""}, {"name": "Google I/O 2014 - Unlock the next era of UI development with Polymer", "url": "https://youtu.be/HKrYfrAzqFA", "description": ""}, {"name": "Making Polymer Elements Accessible", "url": "https://youtu.be/_IBiXfxhF-A", "description": ""}, {"name": "Building an Accessible Disclosure Button \u2013 using Web Components", "url": "https://developer.paciellogroup.com/blog/2014/06/accessible-disclosure-button-using-web-components/", "description": ""}, {"name": "The Road to Web Components", "url": "https://youtu.be/yLyyXHhSl8w", "description": ""}, {"name": "The Web Components Revolution is Here", "url": "https://youtu.be/3QLmAm9xtnU", "description": ""}, {"name": "Web Components: A chance to create the future", "url": "https://youtu.be/JUzjr1bIRUg", "description": ""}, {"name": "Web Component Mashups at 3 a.m.", "url": "https://youtu.be/75EuHl6CSTo", "description": ""}, {"name": "Web Components Tools & Libraries", "url": "https://youtu.be/iPmN4CvLGJc", "description": ""}, {"name": "Web Components Can Do That?!", "url": "https://addyosmani.com/fitc-wccdt/", "description": ""}, {"name": "Web Components and you \u2013 dangers to avoid", "url": "https://christianheilmann.com/2014/04/18/web-components-and-you-dangers-to-avoid/", "description": ""}, {"name": "HTML as Custom Elements", "url": "https://github.com/domenic/html-as-custom-elements", "description": "", "stars": "261"}, {"name": "The Web's Declarative, Composable Future", "url": "https://addyosmani.com/blog/the-webs-declarative-composable-future/", "description": ""}, {"name": "Using Polymer to Create Web Components", "url": "https://code.tutsplus.com/tutorials/using-polymer-to-create-web-components--cms-20475", "description": ""}, {"name": "The Shadow DOM Diaries", "url": "https://gist.github.com/dglazkov/efd2deec54f65aa86f2e", "description": ""}, {"name": "A Detailed Introduction To Custom Elements", "url": "https://www.smashingmagazine.com/2014/03/introduction-to-custom-elements/", "description": ""}, {"name": "A future called Web Components", "url": "https://speakerdeck.com/zenorocha/a-future-called-web-components", "description": ""}, {"name": "Building Mobile Web Applications With Brick", "url": "https://youtu.be/dW2ib0bkxGQ", "description": ""}, {"name": "Polymer: declarative, encapsulated, and reusable components for the web", "url": "https://youtu.be/DH1vTVkqCDQ", "description": ""}, {"name": "Web Components: Why you're already an expert", "url": "https://youtu.be/s1PTPZwzQA4", "description": ""}, {"name": "Yo Polymer: a new way of building web apps", "url": "https://youtu.be/booRxAJblwM", "description": ""}, {"name": "Performance and Custom Elements", "url": "https://www.stevesouders.com/blog/2013/11/26/performance-and-custom-elements/", "description": ""}, {"name": "Web Components Revolution", "url": "https://robdodson.github.io/webcomponents-revolution/", "description": ""}, {"name": "A Guide to Web Components", "url": "https://css-tricks.com/modular-future-web-components/", "description": ""}, {"name": "Return of Inspector Web: Web Components a Year Later", "url": "https://vimeo.com/78899868", "description": ""}, {"name": "Working with Custom Elements", "url": "https://web.dev/customelements/", "description": ""}, {"name": "Creating Reusable Markup with The HTML Template Element", "url": "https://blog.teamtreehouse.com/creating-reusable-markup-with-the-html-template-element", "description": ""}, {"name": "Working with Shadow DOM", "url": "https://blog.teamtreehouse.com/working-with-shadow-dom", "description": ""}, {"name": "Breaking Development: Web Components", "url": "https://www.lukew.com/ff/entry.asp?1752", "description": ""}, {"name": "Web Components: A Tectonic Shift for Web Development - Google I/O 2013", "url": "https://youtu.be/fqULJBBEVQE", "description": ""}, {"name": "Web Components: Getting Started", "url": "https://vimeo.com/68212204", "description": ""}, {"name": "Shadow DOM 101", "url": "https://web.dev/shadowdom/", "description": ""}, {"name": "Shadow DOM 201", "url": "https://web.dev/shadowdom-201/", "description": ""}, {"name": "Shadow DOM 301", "url": "https://web.dev/shadowdom-301/", "description": ""}, {"name": "Visualizing shadow DOM concepts", "url": "https://developer.chrome.com/blog/visualizing-shadow-dom-concepts/", "description": ""}, {"name": "Web components and the future of web development", "url": "https://youtu.be/pb6DsPNdoXk", "description": ""}, {"name": "HTML's New Template Tag", "url": "https://web.dev/webcomponents-template/", "description": ""}, {"name": "The Basics of the Shadow DOM", "url": "https://www.sitepoint.com/the-basics-of-the-shadow-dom/", "description": ""}, {"name": "Notes on Web Components + ARIA", "url": "https://developer.paciellogroup.com/blog/2012/07/notes-on-web-components-aria/", "description": ""}, {"name": "Google I/O 2012 - The Web Platform's Cutting Edge", "url": "https://youtu.be/2txPYQOWBtg", "description": ""}, {"name": "Introduction to Web Components", "url": "https://www.w3.org/TR/2012/WD-components-intro-20120522/", "description": ""}, {"name": "Web Components and Model Driven Views by Alex Russell", "url": "https://fronteers.nl/congres/2011/sessions/web-components-and-model-driven-views-alex-russell", "description": ""}, {"name": "What the Heck is Shadow DOM?", "url": "https://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/", "description": ""}]}], "name": ""}