[38;5;12m                                                                            [39m[38;2;255;187;0m[1m[4mAwesome Web Components [0m[38;5;14m[1m[4m![0m[38;2;255;187;0m[1m[4mAwesome[0m[38;5;14m[1m[4m (https://awesome.re/badge.svg)[0m[38;2;255;187;0m[1m[4m (https://awesome.re)[0m

[38;5;12mA curated list of awesome Web Components resources.[39m

[38;5;11m[1m▐[0m[38;5;12m [39m[38;5;14m[1mNote[0m
[38;5;11m[1m▐[0m[38;5;12m [39m[38;5;12mThis project was previously named "Web Components the Right Way"[39m

[38;5;14m[1mWeb[0m[38;5;14m[1m [0m[38;5;14m[1mComponents[0m[38;5;12m [39m[38;5;12m(https://developer.mozilla.org/en-US/docs/Web/Web_Components)[39m[38;5;12m [39m[38;5;12m—[39m[38;5;12m [39m[38;5;12ma[39m[38;5;12m [39m[38;5;12msuite[39m[38;5;12m [39m[38;5;12mof[39m[38;5;12m [39m[38;5;12mdifferent[39m[38;5;12m [39m[38;5;12mtechnologies[39m[38;5;12m [39m[38;5;12mallowing[39m[38;5;12m [39m[38;5;12myou[39m[38;5;12m [39m[38;5;12mto[39m[38;5;12m [39m[38;5;12mcreate[39m[38;5;12m [39m[38;5;12mreusable[39m[38;5;12m [39m[38;5;12mcustom[39m[38;5;12m [39m[38;5;12melements[39m[38;5;12m [39m[38;5;12m—[39m[38;5;12m [39m[38;5;12mwith[39m[38;5;12m [39m[38;5;12mtheir[39m[38;5;12m [39m[38;5;12mfunctionality[39m[38;5;12m [39m[38;5;12mencapsulated[39m[38;5;12m [39m[38;5;12maway[39m[38;5;12m [39m[38;5;12mfrom[39m[38;5;12m [39m[38;5;12mthe[39m[38;5;12m [39m[38;5;12mrest[39m[38;5;12m [39m[38;5;12mof[39m[38;5;12m [39m[38;5;12myour[39m[38;5;12m [39m[38;5;12mcode[39m[38;5;12m [39m[38;5;12m—[39m[38;5;12m [39m
[38;5;12mand[39m[38;5;12m [39m[38;5;12mutilize[39m[38;5;12m [39m[38;5;12mthem[39m[38;5;12m [39m[38;5;12min[39m[38;5;12m [39m[38;5;12myour[39m[38;5;12m [39m[38;5;12mweb[39m[38;5;12m [39m[38;5;12mapps.[39m

[38;2;255;187;0m[4mContents[0m

[38;5;12m- [39m[38;5;14m[1mIntroduction[0m[38;5;12m (#introduction)[39m
[38;5;12m- [39m[38;5;14m[1mStandards[0m[38;5;12m (#standards)[39m
[38;5;12m  - [39m[38;5;14m[1mCustom Elements[0m[38;5;12m (#custom-elements)[39m
[38;5;12m  - [39m[38;5;14m[1mShadow DOM[0m[38;5;12m (#shadow-dom)[39m
[38;5;12m  - [39m[38;5;14m[1mHTML Templates[0m[38;5;12m (#html-templates)[39m
[38;5;12m  - [39m[38;5;14m[1mCSS Shadow Parts[0m[38;5;12m (#css-shadow-parts)[39m
[38;5;12m- [39m[38;5;14m[1mGuides[0m[38;5;12m (#guides)[39m
[38;5;12m  - [39m[38;5;14m[1mAccessibility[0m[38;5;12m (#accessibility)[39m
[38;5;12m  - [39m[38;5;14m[1mBest Practices[0m[38;5;12m (#best-practices)[39m
[38;5;12m  - [39m[38;5;14m[1mCodelabs[0m[38;5;12m (#codelabs)[39m
[38;5;12m  - [39m[38;5;14m[1mExamples[0m[38;5;12m (#examples)[39m
[38;5;12m- [39m[38;5;14m[1mArticles[0m[38;5;12m (#articles)[39m
[38;5;12m  - [39m[38;5;14m[1mArchitecture[0m[38;5;12m (#architecture)[39m
[38;5;12m  - [39m[38;5;14m[1mInteroperability[0m[38;5;12m (#interoperability)[39m
[38;5;12m  - [39m[38;5;14m[1mLimitations[0m[38;5;12m (#limitations)[39m
[38;5;12m  - [39m[38;5;14m[1mStyling[0m[38;5;12m (#styling)[39m
[38;5;12m- [39m[38;5;14m[1mReal World[0m[38;5;12m (#real-world)[39m
[38;5;12m  - [39m[38;5;14m[1mCase Studies[0m[38;5;12m (#case-studies)[39m
[38;5;12m  - [39m[38;5;14m[1mComponents[0m[38;5;12m (#components)[39m
[38;5;12m  - [39m[38;5;14m[1mComponent Libraries[0m[38;5;12m (#component-libraries)[39m
[38;5;12m  - [39m[38;5;14m[1mDesign Systems[0m[38;5;12m (#design-systems)[39m
[38;5;12m  - [39m[38;5;14m[1mUse Cases[0m[38;5;12m (#use-cases)[39m
[38;5;12m- [39m[38;5;14m[1mLibraries[0m[38;5;12m (#libraries)[39m
[38;5;12m  - [39m[38;5;14m[1mClass Based[0m[38;5;12m (#class-based)[39m
[38;5;12m  - [39m[38;5;14m[1mFunctional[0m[38;5;12m (#functional)[39m
[38;5;12m  - [39m[38;5;14m[1mIntegrations[0m[38;5;12m (#integrations)[39m
[38;5;12m  - [39m[38;5;14m[1mBenchmarks[0m[38;5;12m (#benchmarks)[39m
[38;5;12m- [39m[38;5;14m[1mFrameworks[0m[38;5;12m (#frameworks)[39m
[38;5;12m  - [39m[38;5;14m[1mAngular[0m[38;5;12m (#angular)[39m
[38;5;12m  - [39m[38;5;14m[1mReact[0m[38;5;12m (#react)[39m
[38;5;12m  - [39m[38;5;14m[1mVue[0m[38;5;12m (#vue)[39m
[38;5;12m  - [39m[38;5;14m[1mSvelte[0m[38;5;12m (#svelte)[39m
[38;5;12m- [39m[38;5;14m[1mEcosystem[0m[38;5;12m (#ecosystem)[39m
[38;5;12m  - [39m[38;5;14m[1mMeta Frameworks[0m[38;5;12m (#meta-frameworks)[39m
[38;5;12m  - [39m[38;5;14m[1mStarter Kits[0m[38;5;12m (#starter-kits)[39m
[38;5;12m  - [39m[38;5;14m[1mTesting Solutions[0m[38;5;12m (#testing-solutions)[39m
[38;5;12m  - [39m[38;5;14m[1mTools[0m[38;5;12m (#tools)[39m
[38;5;12m- [39m[38;5;14m[1mBooks[0m[38;5;12m (#books)[39m
[38;5;12m- [39m[38;5;14m[1mTutorials[0m[38;5;12m (#tutorials)[39m
[38;5;12m- [39m[38;5;14m[1mInsights[0m[38;5;12m (#insights)[39m
[38;5;12m  - [39m[38;5;14m[1mPodcasts[0m[38;5;12m (#podcasts)[39m
[38;5;12m  - [39m[38;5;14m[1mPresentations[0m[38;5;12m (#presentations)[39m
[38;5;12m  - [39m[38;5;14m[1mTalks[0m[38;5;12m (#talks)[39m
[38;5;12m- [39m[38;5;14m[1mUsage Metrics[0m[38;5;12m (#usage-metrics)[39m
[38;5;12m- [39m[38;5;14m[1mProposals[0m[38;5;12m (#proposals)[39m
[38;5;12m  - [39m[38;5;14m[1mForm-associated Custom Elements[0m[38;5;12m (#form-associated-custom-elements)[39m
[38;5;12m  - [39m[38;5;14m[1mConstructable Stylesheet Objects[0m[38;5;12m (#constructable-stylesheet-objects)[39m
[38;5;12m  - [39m[38;5;14m[1mCustom State Pseudo Class[0m[38;5;12m (#custom-state-pseudo-class)[39m
[38;5;12m- [39m[38;5;14m[1mMiscellaneous[0m[38;5;12m (#miscellaneous)[39m
[38;5;12m- [39m[38;5;14m[1mArchive[0m[38;5;12m (#archive)[39m
[38;5;12m  - [39m[38;5;14m[1mPolyfills[0m[38;5;12m (#polyfills)[39m
[38;5;12m  - [39m[38;5;14m[1mHistory[0m[38;5;12m (#history)[39m
[38;5;12m- [39m[38;5;14m[1mWho To Follow[0m[38;5;12m (#who-to-follow)[39m
[38;5;12m- [39m[38;5;14m[1mMaintainers[0m[38;5;12m (#maintainers)[39m

[38;2;255;187;0m[4mIntroduction[0m

[38;5;12m- [39m[38;5;14m[1mAn Introduction to Web Components[0m[38;5;12m (https://css-tricks.com/an-introduction-to-web-components/)[39m
[38;5;12m- [39m[38;5;14m[1mIntro to Web Components[0m[38;5;12m (https://developer.salesforce.com/blogs/2020/01/intro-to-web-components.html)[39m
[38;5;12m- [39m[38;5;14m[1mThe Holy Grail Of Reusable Components: Custom Elements, Shadow DOM, And NPM[0m[38;5;12m (https://www.smashingmagazine.com/2018/07/reusable-components-custom-elements-shadow-dom-npm/)[39m
[38;5;12m- [39m[38;5;14m[1mThe Motivation For Using Web Components, an Introduction[0m[38;5;12m (https://www.thinktecture.com/web-components/introduction-and-motivation/)[39m
[38;5;12m- [39m[38;5;14m[1mThe Power of Web Components[0m[38;5;12m (https://hacks.mozilla.org/2018/11/the-power-of-web-components/)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components 101[0m[38;5;12m (https://nhswd.com/blog/web-components-101-what-are-web-components/)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components: From the orbital height[0m[38;5;12m (https://javascript.info/webcomponents-intro)[39m
[38;5;12m- [39m[38;5;14m[1mWhat are browser-native web components?[0m[38;5;12m (https://gomakethings.com/what-are-browser-native-web-components/)[39m
[38;5;12m- [39m[38;5;14m[1mWhy Web Components?[0m[38;5;12m (https://www.fast.design/docs/resources/why-web-components/)[39m

[38;2;255;187;0m[4mStandards[0m

[38;2;255;187;0m[4mCustom Elements[0m

[38;5;12mCustom Elements provide a way for authors to build their own fully-featured DOM elements.[39m

[38;5;12m- [39m[38;5;14m[1mA Guide to Custom Elements for React Developers[0m[38;5;12m (https://css-tricks.com/a-guide-to-custom-elements-for-react-developers/)[39m
[38;5;12m- [39m[38;5;14m[1mAll about HTML Custom Elements[0m[38;5;12m (https://github.com/shawnbot/custom-elements)[39m
[38;5;12m- [39m[38;5;14m[1mCustom elements[0m[38;5;12m (https://javascript.info/custom-elements)[39m
[38;5;12m- [39m[38;5;14m[1mCustom Elements v1: Reusable Web Components[0m[38;5;12m (https://web.dev/custom-elements-v1/)[39m
[38;5;12m- [39m[38;5;14m[1mHandling properties in custom element upgrades[0m[38;5;12m (https://nolanlawson.com/2021/08/03/handling-properties-in-custom-element-upgrades/)[39m
[38;5;12m- [39m[38;5;14m[1mHandy Custom Elements' Patterns[0m[38;5;12m (https://gist.github.com/WebReflection/ec9f6687842aa385477c4afca625bbf4)[39m
[38;5;12m- [39m[38;5;14m[1mHTML Living Standard: Custom elements[0m[38;5;12m (https://html.spec.whatwg.org/multipage/custom-elements.html)[39m
[38;5;12m- [39m[38;5;14m[1mMDN - Using Custom Elements[0m[38;5;12m (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)[39m
[38;5;12m- [39m[38;5;14m[1mweb-platform-tests[0m[38;5;12m (https://github.com/web-platform-tests/wpt/tree/master/custom-elements)[39m

[38;2;255;187;0m[4mShadow DOM[0m

[38;5;12mShadow DOM describes a method of combining multiple DOM trees into one hierarchy and how these trees interact with each other within a document, thus enabling better composition of the DOM.[39m

[38;5;12m- [39m[38;5;14m[1mA complete guide on shadow DOM and event propagation[0m[38;5;12m (https://pm.dartus.fr/blog/a-complete-guide-on-shadow-dom-and-event-propagation/)[39m
[38;5;12m- [39m[38;5;14m[1mDOM Living Standard: Shadow tree[0m[38;5;12m (https://dom.spec.whatwg.org/#shadow-trees)[39m
[38;5;12m- [39m[38;5;14m[1mMDN - Using Shadow DOM[0m[38;5;12m (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)[39m
[38;5;12m- [39m[38;5;14m[1mMind the document.activeElement![0m[38;5;12m (https://dev.to/open-wc/mind-the-document-activeelement-2o9a)[39m
[38;5;12m- [39m[38;5;14m[1mOpen vs. Closed Shadow DOM[0m[38;5;12m (https://blog.revillweb.com/open-vs-closed-shadow-dom-9f3d7427d1af)[39m
[38;5;12m- [39m[38;5;14m[1mShadow DOM[0m[38;5;12m (https://javascript.info/shadow-dom)[39m
[38;5;12m- [39m[38;5;14m[1mShadow DOM and events[0m[38;5;12m (https://javascript.info/shadow-dom-events)[39m
[38;5;12m- [39m[38;5;14m[1mShadow DOM in depth[0m[38;5;12m (https://github.com/praveenpuglia/shadow-dom-in-depth)[39m
[38;5;12m- [39m[38;5;14m[1mShadow DOM slots, composition[0m[38;5;12m (https://javascript.info/slots-composition)[39m
[38;5;12m- [39m[38;5;14m[1mShadow DOM styling[0m[38;5;12m (https://javascript.info/shadow-dom-style)[39m
[38;5;12m- [39m[38;5;14m[1mShadow DOM v1: Self-Contained Web Components[0m[38;5;12m (https://web.dev/shadowdom-v1/)[39m
[38;5;12m- [39m[38;5;14m[1mThe Rise of Shadow DOM[0m[38;5;12m (https://medium.com/front-end-hacking/the-rise-of-shadow-dom-84aa1f731e82)[39m
[38;5;12m- [39m[38;5;14m[1mUnderstanding Slot Updates with Web Components[0m[38;5;12m (https://coryrylan.com/blog/understanding-slot-updates-with-web-components)[39m
[38;5;12m- [39m[38;5;14m[1mWhat is the Shadow DOM?[0m[38;5;12m (https://bitsofco.de/what-is-the-shadow-dom/)[39m
[38;5;12m- [39m[38;5;14m[1mWho doesn't love some slots?[0m[38;5;12m (https://dev.to/westbrook/who-doesnt-love-some-s-3de0)[39m
[38;5;12m- [39m[38;5;14m[1mYour Content in Shadow DOM Portals[0m[38;5;12m (https://dev.to/westbrook/your-content-in-shadow-dom-portals-3cdb)[39m
[38;5;12m- [39m[38;5;14m[1mweb-platform-tests[0m[38;5;12m (https://github.com/web-platform-tests/wpt/tree/master/shadow-dom)[39m

[38;2;255;187;0m[4mHTML Templates[0m

[38;5;12m element is used to declare fragments of HTML that can be cloned and inserted in the document by script.[39m

[38;5;12m- [39m[38;5;14m[1mCrafting Reusable HTML Templates[0m[38;5;12m (https://css-tricks.com/crafting-reusable-html-templates/)[39m
[38;5;12m- [39m[38;5;14m[1mHTML Living Standard: The [0m[48;5;235m[38;5;249m[1mtemplate[0m[38;5;14m[1m element[0m[38;5;12m (https://html.spec.whatwg.org/multipage/scripting.html#the-template-element)[39m
[38;5;12m- [39m[38;5;14m[1mHTML templates with vanilla JavaScript[0m[38;5;12m (https://gomakethings.com/html-templates-with-vanilla-javascript/)[39m
[38;5;12m- [39m[38;5;14m[1mMDN - &lt;template&gt;: The Content Template element[0m[38;5;12m (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)[39m
[38;5;12m- [39m[38;5;14m[1mMDN - Using templates and slots[0m[38;5;12m (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots)[39m
[38;5;12m- [39m[38;5;14m[1mTemplate element[0m[38;5;12m (https://javascript.info/template-element)[39m
[38;5;12m- [39m[38;5;14m[1mTemplating in HTML[0m[38;5;12m (https://kittygiraudel.com/2022/09/30/templating-in-html/)[39m
[38;5;12m- [39m[38;5;14m[1mThe HTML5 template element[0m[38;5;12m (https://dev.to/ahferroin7/the-html5-template-element-26b6)[39m
[38;5;12m- [39m[38;5;14m[1mUnderstanding The Template Element In HTML[0m[38;5;12m (https://blog.openreplay.com/understanding-the-template-element-in-html/)[39m
[38;5;12m- [39m[38;5;14m[1mweb-platform-tests[0m[38;5;12m (https://github.com/web-platform-tests/wpt/tree/master/html/semantics/scripting-1/the-template-element)[39m

[38;2;255;187;0m[4mCSS Shadow Parts[0m

[38;5;12mCSS Shadow Parts allow developers to expose certain elements inside Shadow DOM for styling purposes.[39m

[38;5;12m- [39m[38;5;14m[1mW3C First Public Working Draft[0m[38;5;12m (https://www.w3.org/TR/css-shadow-parts-1/)[39m
[38;5;12m- [39m[38;5;14m[1mCSS Shadow Parts are coming![0m[38;5;12m (https://dev.to/webpadawan/css-shadow-parts-are-coming-mi5)[39m
[38;5;12m- [39m[38;5;14m[1mMDN - [0m[48;5;235m[38;5;249m[1m::part()[0m[38;5;14m[1m CSS pseudo element[0m[38;5;12m (https://developer.mozilla.org/en-US/docs/Web/CSS/::part)[39m
[38;5;12m- [39m[38;5;14m[1mMDN - [0m[48;5;235m[38;5;249m[1mpart[0m[38;5;14m[1m global attribute[0m[38;5;12m (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part)[39m
[38;5;12m- [39m[38;5;14m[1m::part and ::theme, an ::explainer[0m[38;5;12m (https://meowni.ca/posts/part-theme-explainer/)[39m
[38;5;12m- [39m[38;5;14m[1mweb-platform-tests[0m[38;5;12m (https://github.com/web-platform-tests/wpt/tree/master/css/css-shadow-parts)[39m

[38;2;255;187;0m[4mGuides[0m

[38;2;255;187;0m[4mAccessibility[0m

[38;5;12m- [39m[38;5;14m[1mAccessibility for Web Components[0m[38;5;12m (https://developer.salesforce.com/blogs/2020/01/accessibility-for-web-components.html)[39m
[38;5;12m- [39m[38;5;14m[1mAccessibility with ID Referencing and Shadow DOM[0m[38;5;12m (https://coryrylan.com/blog/accessibility-with-id-referencing-and-shadow-dom)[39m
[38;5;12m- [39m[38;5;14m[1mDialogs and shadow DOM: can we make it accessible?[0m[38;5;12m (https://nolanlawson.com/2022/06/14/dialogs-and-shadow-dom-can-we-make-it-accessible/)[39m
[38;5;12m- [39m[38;5;14m[1mHow to Make Accessible Web Components — a Brief Guide[0m[38;5;12m (https://www.sitepoint.com/accessible-web-components/)[39m
[38;5;12m- [39m[38;5;14m[1mManaging focus in the shadow DOM[0m[38;5;12m (https://nolanlawson.com/2021/02/13/managing-focus-in-the-shadow-dom/)[39m
[38;5;12m- [39m[38;5;14m[1mThe future of accessibility for custom elements[0m[38;5;12m (https://robdodson.me/the-future-of-accessibility-for-custom-elements/)[39m
[38;5;12m- [39m[38;5;14m[1mThe Guide to Accessible Web Components[0m[38;5;12m (https://www.erikkroes.nl/blog/accessibility/the-guide-to-accessible-web-components-draft/)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components and the Accessibility Object model (AOM)[0m[38;5;12m (https://www.24a11y.com/2019/web-components-and-the-aom/)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components punch list[0m[38;5;12m (https://www.tpgi.com/web-components-punch-list/)[39m
[38;5;12m- [39m[38;5;14m[1mWeb components still need to be accessible[0m[38;5;12m (https://www.24a11y.com/2018/web-components-still-need-to-be-accessible/)[39m

[38;2;255;187;0m[4mBest Practices[0m

[38;5;12m- [39m[38;5;14m[1mCustom Element Best Practices[0m[38;5;12m (https://web.dev/custom-elements-best-practices/)[39m
[38;5;12m- [39m[38;5;14m[1mDeveloping Components: Publishing[0m[38;5;12m (https://open-wc.org/guides/developing-components/publishing/)[39m
[38;5;12m- [39m[38;5;14m[1mGold Standard Checklist for Web Components[0m[38;5;12m (https://github.com/webcomponents/gold-standard/wiki)[39m
[38;5;12m- [39m[38;5;14m[1mGuidelines for creating web platform compatible components[0m[38;5;12m (https://w3ctag.github.io/webcomponents-design-guidelines/)[39m
[38;5;12m- [39m[38;5;14m[1mHow to Publish Web Components to NPM[0m[38;5;12m (https://justinfagnani.com/2019/11/01/how-to-publish-web-components-to-npm/)[39m
[38;5;12m- [39m[38;5;14m[1mOpen Web Components Recommendations[0m[38;5;12m (https://open-wc.org)[39m

[38;2;255;187;0m[4mCodelabs[0m

[38;5;12m- [39m[38;5;14m[1mBuild a Story Web Component with LitElement[0m[38;5;12m (https://dev.to/straversi/build-a-story-web-component-with-litelement-e59)[39m
[38;5;12m- [39m[38;5;14m[1mBuilding Custom Elements with Web Components for the 2020 Elections[0m[38;5;12m (https://medium.com/stories-from-upstatement/building-custom-elements-with-web-components-for-the-2020-elections-f767ff9e9c6a)[39m
[38;5;12m- [39m[38;5;14m[1mCreating Custom Form Controls with ElementInternals[0m[38;5;12m (https://css-tricks.com/creating-custom-form-controls-with-elementinternals/)[39m
[38;5;12m- [39m[38;5;14m[1mFrom Web Component to Lit Element[0m[38;5;12m (https://codelabs.developers.google.com/codelabs/the-lit-path)[39m
[38;5;12m- [39m[38;5;14m[1mHowTo Components –[0m[38;5;12m (https://web.dev/components-howto-checkbox/)[39m
[38;5;12m- [39m[38;5;14m[1mHowTo Components –[0m[38;5;12m (https://web.dev/components-howto-tabs/)[39m
[38;5;12m- [39m[38;5;14m[1mHowTo Components – [0m[38;5;12m (https://web.dev/components-howto-tooltip/)[39m
[38;5;12m- [39m[38;5;14m[1mLit: basics[0m[38;5;12m (https://open-wc.org/codelabs/basics/lit-html.html#0)[39m
[38;5;12m- [39m[38;5;14m[1mLit: intermediate[0m[38;5;12m (https://open-wc.org/codelabs/intermediate/lit-html.html#0)[39m
[38;5;12m- [39m[38;5;14m[1mLit for React Developers[0m[38;5;12m (https://codelabs.developers.google.com/codelabs/lit-2-for-react-devs#0)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components: basics[0m[38;5;12m (https://open-wc.org/codelabs/basics/web-components.html#0)[39m

[38;2;255;187;0m[4mExamples[0m

[38;5;12m- [39m[38;5;14m[1mgeneric-components[0m[38;5;12m (https://github.com/thepassle/generic-components) - Collection of generic web components with a focus on accessibility, and ease of use.[39m
[38;5;12m- [39m[38;5;14m[1mhowto-components[0m[38;5;12m (https://github.com/GoogleChromeLabs/howto-components) - Collection of web components that implement common web UI patterns.[39m
[38;5;12m- [39m[38;5;14m[1mNude UI[0m[38;5;12m (https://github.com/LeaVerou/nudeui) - Collection of accessible, customizable, ultra-light web components.[39m
[38;5;12m- [39m[38;5;14m[1mopen-wc code examples[0m[38;5;12m (https://open-wc.org/guides/developing-components/code-examples/) - Collection of best practices and design patterns for developing web components.[39m
[38;5;12m- [39m[38;5;14m[1mvanilla-retro-js[0m[38;5;12m (https://github.com/martine-dowden/vanilla-retro-js) - Vanilla JS UI component library of HTML deprecated tags.[39m
[38;5;12m- [39m[38;5;14m[1mweb-components-examples[0m[38;5;12m (https://github.com/mdn/web-components-examples) - Series of web components examples, related to the MDN web components documentation.[39m

[38;2;255;187;0m[4mArticles[0m

[38;2;255;187;0m[4mArchitecture[0m

[38;5;12m- [39m[38;5;14m[1mA deep analysis into isomorphic, autonomous cross-framework usage #MicroFrontends[0m[38;5;12m (https://itnext.io/a-deep-analysis-into-isomorphic-autonomous-cross-framework-usage-microfrontends-364271dc5fa9)[39m
[38;5;12m- [39m[38;5;14m[1mFrankenstein Migration: Framework-Agnostic Approach (Part 1)[0m[38;5;12m (https://www.smashingmagazine.com/2019/09/frankenstein-migration-framework-agnostic-approach-part-1/)[39m
[38;5;12m- [39m[38;5;14m[1mFrankenstein Migration: Framework-Agnostic Approach (Part 2)[0m[38;5;12m (https://www.smashingmagazine.com/2019/09/frankenstein-migration-framework-agnostic-approach-part-2/)[39m
[38;5;12m- [39m[38;5;14m[1mGenerating Config driven Dynamic Forms using Web Components[0m[38;5;12m (https://codeburst.io/generating-config-driven-dynamic-forms-using-web-components-7c8d400f7f2e)[39m
[38;5;12m- [39m[38;5;14m[1mHiding internal framework methods and properties from web component APIs[0m[38;5;12m (https://component.kitchen/blog/posts/hiding-internal-framework-methods-and-properties-from-web-component-apis)[39m
[38;5;12m- [39m[38;5;14m[1mHow to deliver Custom Elements[0m[38;5;12m (https://medium.com/@WebReflection/how-to-deliver-custom-elements-702fae32d25c)[39m
[38;5;12m- [39m[38;5;14m[1mMaking Web Components for Different Contexts[0m[38;5;12m (https://css-tricks.com/making-web-components-for-different-contexts/)[39m
[38;5;12m- [39m[38;5;14m[1mSupporting both automatic and manual registration of custom elements[0m[38;5;12m (https://component.kitchen/blog/posts/supporting-both-automatic-and-manual-registration-of-custom-elements)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components — the right way[0m[38;5;12m (https://equinusocio.dev/blog/web-components-the-right-way/)[39m

[38;2;255;187;0m[4mInteroperability[0m

[38;5;12m- [39m[38;5;14m[1mAdvanced Tooling for Web Components[0m[38;5;12m (https://css-tricks.com/advanced-tooling-for-web-components/)[39m
[38;5;12m- [39m[38;5;14m[1mCustom Elements Everywhere[0m[38;5;12m (https://custom-elements-everywhere.com)[39m
[38;5;12m- [39m[38;5;14m[1mCustom Elements That Work Anywhere[0m[38;5;12m (https://robdodson.me/interoperable-custom-elements/)[39m
[38;5;12m- [39m[38;5;14m[1mJavaScript frameworks, meet Web Components[0m[38;5;12m (https://www.voorhoede.nl/nl/blog/javascript-frameworks-meet-web-components/)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components aren't a framework replacement - they're better than that[0m[38;5;12m (https://lamplightdev.com/blog/2020/01/18/web-components-arent-a-framework-replacement-theyre-better-than-that/)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components: Seamlessly interoperable[0m[38;5;12m (https://medium.com/@sergicontre/web-components-seamlessly-interoperable-82efd6989ca4)[39m

[38;2;255;187;0m[4mLimitations[0m

[38;5;12m- [39m[38;5;14m[1mBeyond the polyfills: how Web Components affect us today?[0m[38;5;12m (https://dev.to/webpadawan/beyond-the-polyfills-how-web-components-affect-us-today-3j0a)[39m
[38;5;12m- [39m[38;5;14m[1mCustom elements, shadow DOM and implicit form submission[0m[38;5;12m (https://www.hjorthhansen.dev/shadow-dom-and-forms/)[39m
[38;5;12m- [39m[38;5;14m[1mForm-associated custom elements[0m[38;5;12m (https://www.hjorthhansen.dev/shadow-dom-form-participation/)[39m
[38;5;12m- [39m[38;5;14m[1mYou might not need shadow DOM[0m[38;5;12m (https://www.hjorthhansen.dev/you-might-not-need-shadow-dom/)[39m

[38;2;255;187;0m[4mStyling[0m

[38;5;12m- [39m[38;5;14m[1mDoes shadow DOM improve style performance?[0m[38;5;12m (https://nolanlawson.com/2021/08/15/does-shadow-dom-improve-style-performance/)[39m
[38;5;12m- [39m[38;5;14m[1mEschewing Shadow DOM[0m[38;5;12m (https://every-layout.dev/blog/eschewing-shadow-dom/)[39m
[38;5;12m- [39m[38;5;14m[1mHow Nordhealth uses Custom Properties in Web Components[0m[38;5;12m (https://web.dev/custom-properties-web-components/)[39m
[38;5;12m- [39m[38;5;14m[1mOptions for styling web components[0m[38;5;12m (https://nolanlawson.com/2021/01/03/options-for-styling-web-components/)[39m
[38;5;12m- [39m[38;5;14m[1mStyle scoping versus shadow DOM: which is fastest?[0m[38;5;12m (https://nolanlawson.com/2022/06/22/style-scoping-versus-shadow-dom-which-is-fastest/)[39m
[38;5;12m- [39m[38;5;14m[1mStyling a Web Component[0m[38;5;12m (https://css-tricks.com/styling-a-web-component/)[39m
[38;5;12m- [39m[38;5;14m[1mStyling in the Shadow DOM With CSS Shadow Parts[0m[38;5;12m (https://css-tricks.com/styling-in-the-shadow-dom-with-css-shadow-parts/)[39m
[38;5;12m- [39m[38;5;14m[1mThinking Through Styling Options for Web Components[0m[38;5;12m (https://css-tricks.com/thinking-through-styling-options-for-web-components/)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Component Pseudo-Classes and Pseudo-Elements are Easier Than You Think[0m[38;5;12m (https://css-tricks.com/web-component-pseudo-classes-and-pseudo-elements/)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Standards Meet User-Land: Using CSS-in-JS to Style Custom Elements[0m[38;5;12m (https://css-tricks.com/web-standards-meet-user-land-using-css-in-js-to-style-custom-elements/)[39m

[38;2;255;187;0m[4mReal World[0m

[38;2;255;187;0m[4mCase Studies[0m

[38;5;12m- [39m[38;5;14m[1mApple Just Shipped Web Components to Production and You Probably Missed It[0m[38;5;12m (https://dev.to/ionic/apple-just-shipped-web-components-to-production-and-you-probably-missed-it-57pf)[39m
[38;5;12m- [39m[38;5;14m[1mBringing Order to Web Design Chaos (with Web Components)[0m[38;5;12m (https://dev.to/thatjoemoore/bringing-order-to-web-design-chaos--3fhb)[39m
[38;5;12m- [39m[38;5;14m[1mGet moving with Microsoft’s FAST web components[0m[38;5;12m (https://www.infoworld.com/article/3618410/get-moving-with-microsofts-fast-web-components.html)[39m
[38;5;12m- [39m[38;5;14m[1mHow Web Components Are Used at GitHub and Salesforce[0m[38;5;12m (https://thenewstack.io/how-web-components-are-used-at-github-and-salesforce/)[39m
[38;5;12m- [39m[38;5;14m[1mHow we use Web Components at GitHub[0m[38;5;12m (https://github.blog/2021-05-04-how-we-use-web-components-at-github/)[39m
[38;5;12m- [39m[38;5;14m[1mImplementing a Design Language System with Stencil.js[0m[38;5;12m (https://medium.com/@Danetag/implementing-a-design-language-system-with-stencil-js-515432918eb5)[39m
[38;5;12m- [39m[38;5;14m[1mING ❤ Web Components[0m[38;5;12m (https://dev.to/thepassle/ing--web-components-aef)[39m
[38;5;12m- [39m[38;5;14m[1mING Open-Sources Lion, Its White-Label Web Component Library – Q&A with Thomas Allmer[0m[38;5;12m (https://www.infoq.com/articles/ing-open-sources-lion-web-component/)[39m
[38;5;12m- [39m[38;5;14m[1mLessons Learned, making our app with Web Components[0m[38;5;12m (https://medium.com/samsung-internet-dev/lessons-learned-making-our-app-with-web-components-bf55379cfcda)[39m
[38;5;12m- [39m[38;5;14m[1mLooking back on five years of web components[0m[38;5;12m (https://bitworking.org/news/2019/07/looking-back-on-five-years-of-web-components)[39m
[38;5;12m- [39m[38;5;14m[1mShipping Web Components in 2020[0m[38;5;12m (https://dev.to/joe8bit/shipping-web-components-in-2020-2h54)[39m
[38;5;12m- [39m[38;5;14m[1mThe Firefox UI is now built with Web Components[0m[38;5;12m (https://briangrinstead.com/blog/firefox-webcomponents/)[39m
[38;5;12m- [39m[38;5;14m[1mUsing web components to encapsulate CSS and resolve design system conflicts[0m[38;5;12m (https://about.gitlab.com/blog/2021/05/03/using-web-components-to-encapsulate-css-and-resolve-design-system-conflicts/)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components at GitHub - Web Components SF Meetup[0m[38;5;12m (https://www.infoq.com/news/2020/08/web-components-sf-meetup-2020/)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components at Scale at Salesforce: Challenges Encountered, Lessons Learnt[0m[38;5;12m (https://www.infoq.com/news/2020/03/web-components-salesforce-lwc/)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Development At Scale: Composable Applications With Web Components[0m[38;5;12m (https://medium.com/@jarrodek/composable-applications-with-web-components-ebe5158387be)[39m
[38;5;12m- [39m[38;5;14m[1mweb.dev engineering blog #1: How we build the site and use Web Components[0m[38;5;12m (https://web.dev/how-we-build-webdev-and-use-web-components/)[39m

[38;2;255;187;0m[4mComponents[0m

[38;5;12m- [39m[38;5;12m (https://github.com/OvidijusParsiunas/active-table) - Editable table web component.[39m
[38;5;12m- [39m[38;5;12m (https://github.com/web-padawan/api-viewer-element) - API documentation and live playground for Web Components.[39m
[38;5;12m- [39m[38;5;12m (https://github.com/justinfagnani/chessboard-element) - Standalone chess board web component.[39m
[38;5;12m- [39m[38;5;12m (https://github.com/css-doodle/css-doodle) - Web component for drawing patterns with CSS.[39m
[38;5;12m- [39m[38;5;12m (https://github.com/GoogleChromeLabs/dark-mode-toggle) - Custom element that allows to create a dark mode toggle or switch.[39m
[38;5;12m- [39m[38;5;12m (https://github.com/OvidijusParsiunas/deep-chat) - Web component for chat with AI capabilities.[39m
[38;5;12m- [39m[38;5;12m (https://github.com/nolanlawson/emoji-picker-element) - Lightweight emoji picker, distributed as a web component.[39m
[38;5;12m- [39m[38;5;12m (https://github.com/filamentgroup/fg-modal) - Accessible modal dialog web component.[39m
[38;5;12m- [39m[38;5;12m (https://github.com/avipunes/file-viewer) - Web component built with Svelte to view files.[39m
[38;5;12m- [39m[38;5;12m (https://github.com/alenaksu/json-viewer) - Web component to visualize JSON data in a tree view.[39m
[38;5;12m- [39m[38;5;12m (https://github.com/paulirish/lite-youtube-embed) - Lite YouTube embed with a focus on visual performance.[39m
[38;5;12m- [39m[38;5;12m (https://github.com/cifkao/html-midi-player) - MIDI file player and visualizer web components.[39m
[38;5;12m- [39m[38;5;12m (https://github.com/google/model-viewer) - Web component for rendering interactive 3D models.[39m
[38;5;12m- [39m[38;5;12m (https://github.com/playerxo/playerx) - Media player web component.[39m
[38;5;12m- [39m[38;5;12m (https://github.com/andreruffert/progressive-image-element) - Custom element to progressively enhance image placeholders.[39m
[38;5;12m- [39m[38;5;12m (https://github.com/bitjson/qr-code) – Web component for rendering customizable, animate-able, SVG-based QR codes.[39m
[38;5;12m- [39m[38;5;12m (https://github.com/andreruffert/range-slider-element) - Accessible range slider custom element with keyboard support.[39m
[38;5;12m- [39m[38;5;12m (https://github.com/mrin9/RapiDoc) - Web component for creating documentation from OpenAPI Specification.[39m
[38;5;12m- [39m[38;5;12m (https://github.com/halvves/shader-doodle) - Web component for writing and rendering shaders.[39m
[38;5;12m- [39m[38;5;12m (https://github.com/mahozad/theme-switch) - Animated toggle button to switch between light, dark, and system theme.[39m
[38;5;12m- [39m[38;5;12m (https://github.com/basecamp/trix) - Rich text editor custom element for everyday writing.[39m
[38;5;12m- [39m[38;5;12m (https://github.com/vime-js/vime) - Customizable, extensible, accessible and framework agnostic media player.[39m
[38;5;12m- [39m[38;5;12m (https://github.com/stefanjudis/web-vitals-element) - Bring [39m[38;5;14m[1mweb vitals[0m[38;5;12m (https://github.com/GoogleChrome/web-vitals) quickly into your page using custom elements.[39m

[38;2;255;187;0m[4mComponent Libraries[0m

[38;5;12m- [39m[38;5;14m[1mAMP[0m[38;5;12m (https://github.com/ampproject/amphtml) - Web component framework for easily creating user-first websites, stories, ads, emails and more.[39m
[38;5;12m- [39m[38;5;14m[1mAnywhereUI[0m[38;5;12m (https://github.com/adaleks/anywhere-ui) - Collection of rich web components that includes framework bindings. Created with StencilJS.[39m
[38;5;12m- [39m[38;5;14m[1mApollo Elements[0m[38;5;12m (https://github.com/apollo-elements/apollo-elements) - Custom elements for using Apollo GraphQL with various web components libraries.[39m
[38;5;12m- [39m[38;5;14m[1mAXA Pattern Library[0m[38;5;12m (https://github.com/axa-ch-webhub-cloud/pattern-library) - AXA CH UI components library built with Web Components.[39m
[38;5;12m- [39m[38;5;14m[1mBlackstone UI[0m[38;5;12m (https://github.com/kjantzer/bui) - Web components for creating interfaces by Blackstone Publishing.[39m
[38;5;12m- [39m[38;5;14m[1mBlaze UI Atoms[0m[38;5;12m (https://github.com/BlazeSoftware/atoms) - Set of web components powered by Blaze CSS.[39m
[38;5;12m- [39m[38;5;14m[1mBrightspace UI core[0m[38;5;12m (https://github.com/BrightspaceUI/core) - Collection of web components for building Brightspace applications.[39m
[38;5;12m- [39m[38;5;14m[1mClever components[0m[38;5;12m (https://github.com/CleverCloud/clever-components) - Collection of Web Components made by Clever Cloud.[39m
[38;5;12m- [39m[38;5;14m[1mCurvenote[0m[38;5;12m (https://github.com/curvenote/article) - Web components for creating interactive scientific articles.[39m
[38;5;12m- [39m[38;5;14m[1mDataFormsJS[0m[38;5;12m (https://github.com/dataformsjs/dataformsjs) - Standalone Components for SPA routing, displaying data from web services, and more.[39m
[38;5;12m- [39m[38;5;14m[1mDile Components[0m[38;5;12m (https://github.com/Polydile/dile-components) - General use Web Components for websites and applications.[39m
[38;5;12m- [39m[38;5;14m[1melements-sk[0m[38;5;12m (https://github.com/google/elements-sk) - Collection of custom elements for "a la carte" web development.[39m
[38;5;12m- [39m[38;5;14m[1mgithub-elements[0m[38;5;12m (https://github.com/github/github-elements) - GitHub's Web Component collection.[39m
[38;5;12m- [39m[38;5;14m[1mElix[0m[38;5;12m (https://github.com/elix/elix) - High-quality, customizable web components for common user interface patterns.[39m
[38;5;12m- [39m[38;5;14m[1mFuro Webcomponents[0m[38;5;12m (https://github.com/eclipse/eclipsefuro-web) - Enterprise ready set of web components which work best with Eclipse Furo.[39m
[38;5;12m- [39m[38;5;14m[1mFusion Web Components[0m[38;5;12m (https://github.com/equinor/fusion-web-components) - Ser of web components used by Equinor Fusion.[39m
[38;5;12m- [39m[38;5;14m[1mIgnite UI Web Components[0m[38;5;12m (https://github.com/IgniteUI/igniteui-webcomponents) - Complete library of UI components from Infragistics.[39m
[38;5;12m- [39m[38;5;14m[1mImmersive Custom Elements[0m[38;5;12m (https://github.com/MozillaReality/immersive-custom-elements) - Set of web components for embedding immersive (VR & AR) content.[39m
[38;5;12m- [39m[38;5;14m[1mJoomla UI custom elements[0m[38;5;12m (https://github.com/joomla-projects/custom-elements) - Compilation of Joomla 4 Custom Elements.[39m
[38;5;12m- [39m[38;5;14m[1mKetch.UP[0m[38;5;12m (https://github.com/smeup/ketchup) - Web components library for Sme.UP.[39m
[38;5;12m- [39m[38;5;14m[1mLDRS[0m[38;5;12m (https://github.com/GriffinJohnston/ldrs) - Lightweight, customizable loading animations/spinners.[39m
[38;5;12m- [39m[38;5;14m[1mLion Web Components[0m[38;5;12m (https://github.com/ing-bank/lion) - Set of highly performant, accessible and flexible Web Components.[39m
[38;5;12m- [39m[38;5;14m[1mLRNWebComponents[0m[38;5;12m (https://github.com/elmsln/lrnwebcomponents/) - ELMS:LN produced web components for any project.[39m
[38;5;12m- [39m[38;5;14m[1mLume[0m[38;5;12m (https://github.com/lume/lume) - Custom elements for defining 2D or 3D scenes rendered with CSS3D or WebGL.[39m
[38;5;12m- [39m[38;5;14m[1mMedblocks UI[0m[38;5;12m (https://github.com/medblocks/medblocks-ui) - Web Components for rapid development of openEHR and FHIR systems.[39m
[38;5;12m- [39m[38;5;14m[1mMicrosoft Graph Toolkit[0m[38;5;12m (https://github.com/microsoftgraph/microsoft-graph-toolkit) - Collection of web components for the Microsoft Graph.[39m
[38;5;12m- [39m[38;5;14m[1mMutation testing elements[0m[38;5;12m (https://github.com/stryker-mutator/mutation-testing-elements) - A schema for mutation testing results with the web components to visualize it.[39m
[38;5;12m- [39m[38;5;14m[1mNightingale[0m[38;5;12m (https://github.com/ebi-webcomponents/nightingale) - Data visualisation web components for the life sciences.[39m
[38;5;12m- [39m[38;5;14m[1mNuxeo Elements[0m[38;5;12m (https://github.com/nuxeo/nuxeo-elements) - Components for building web applications with Nuxeo using Web Components.[39m
[38;5;12m- [39m[38;5;14m[1mOne Platform Components[0m[38;5;12m (https://github.com/1-Platform/op-components) - Set of web components for Red Hat One Platform.[39m
[38;5;12m- [39m[38;5;14m[1mOpen Business Application Platform Web Components[0m[38;5;12m (https://github.com/openbap/obap-elements) - Collection of web components designed for business applications.[39m
[38;5;12m- [39m[38;5;14m[1mPixano Elements[0m[38;5;12m (https://github.com/pixano/pixano-elements) - Re-usable web components dedicated to data annotation tasks.[39m
[38;5;12m- [39m[38;5;14m[1mPlayground Elements[0m[38;5;12m (https://github.com/PolymerLabs/playground-elements) - Serverless code experiences with web components.[39m
[38;5;12m- [39m[38;5;14m[1mShoelace[0m[38;5;12m (https://github.com/shoelace-style/shoelace) - A forward-thinking library of web components.[39m
[38;5;12m- [39m[38;5;14m[1mSmart Web Components[0m[38;5;12m (https://github.com/HTMLElements/smart-webcomponents) - Web components for business applications.[39m
[38;5;12m- [39m[38;5;14m[1mStripe Elements[0m[38;5;12m (https://github.com/bennypowers/stripe-elements) - Custom Element Wrapper for Stripe.js v3 Elements.[39m
[38;5;12m- [39m[38;5;14m[1mTEI Publisher Components[0m[38;5;12m (https://github.com/eeditiones/tei-publisher-components) - Collection of web components used by TEI Publisher and apps generated by it.[39m
[38;5;12m- [39m[38;5;14m[1mTitanium Elements[0m[38;5;12m (https://github.com/LeavittSoftware/titanium-elements) - Collection of lightweight web components used by Leavitt Group Enterprises.[39m
[38;5;12m- [39m[38;5;14m[1mTradeshift Elements[0m[38;5;12m (https://github.com/Tradeshift/elements) - Reusable Tradeshift UI Components as Web Components.[39m
[38;5;12m- [39m[38;5;14m[1mTrendChart Elements[0m[38;5;12m (https://github.com/WebLogin/trendchart-elements) - Components to generate simple, light and responsive charts.[39m
[38;5;12m- [39m[38;5;14m[1mUmbraco UI Components[0m[38;5;12m (https://github.com/umbraco/Umbraco.UI) - Collection of user interface web components for Umbraco CMS.[39m
[38;5;12m- [39m[38;5;14m[1mVaadin components[0m[38;5;12m (https://github.com/vaadin/web-components) - Evolving set of high-quality web components for building business web applications.[39m
[38;5;12m- [39m[38;5;14m[1mVSCode Webview Elements[0m[38;5;12m (https://github.com/bendera/vscode-webview-elements) - Components for creating VSCode extensions which use the Webview API.[39m
[38;5;12m- [39m[38;5;14m[1mWarp View[0m[38;5;12m (https://github.com/senx/warpview) - Collection of charting web components for Warp 10.[39m
[38;5;12m- [39m[38;5;14m[1mWebmarkets web components[0m[38;5;12m (https://github.com/Webmarkets/wm-web-components) - Set of Webmarkets' public web components.[39m
[38;5;12m- [39m[38;5;14m[1mWired Elements[0m[38;5;12m (https://github.com/wiredjs/wired-elements) - Set of common UI elements with a hand-drawn, sketchy look.[39m
[38;5;12m- [39m[38;5;14m[1mWokwi Elements[0m[38;5;12m (https://github.com/wokwi/wokwi-elements) - Web Components for Arduino and various electronic parts.[39m
[38;5;12m- [39m[38;5;14m[1mXWeather[0m[38;5;12m (https://github.com/kherrick/x-weather) - Collection of web components implementing portions of the OpenWeatherMap API.[39m

[38;2;255;187;0m[4mDesign Systems[0m

[38;5;12m- [39m[38;5;14m[1mAstro Space UX Design System[0m[38;5;12m (https://github.com/RocketCommunicationsInc/astro) - Set of components to build rich space app experiences with established interaction patterns.[39m
[38;5;12m- [39m[38;5;14m[1mAuro Design System[0m[38;5;12m (https://auro.alaskaair.com) - Alaska Airlines design system to innovate on ideas and collaborate on the future.[39m
[38;5;12m- [39m[38;5;14m[1mBlueprint UI[0m[38;5;12m (https://blueprintui.dev) - Web Component based design system with flexible and lightweight components.[39m
[38;5;12m- [39m[38;5;14m[1mBolt Design System[0m[38;5;12m (https://github.com/boltdesignsystem/bolt) - Twig and Web Component-powered UI components, reusable visual styles and tooling.[39m
[38;5;12m- [39m[38;5;14m[1mCalcite Components[0m[38;5;12m (https://github.com/Esri/calcite-components) - Shared Web Components for Esri's Calcite design framework.[39m
[38;5;12m- [39m[38;5;14m[1mCarbon Web Components[0m[38;5;12m (https://github.com/carbon-design-system/carbon-web-components) - Carbon Design System variant on top of Web Components.[39m
[38;5;12m- [39m[38;5;14m[1mClarity Core Web Components[0m[38;5;12m (https://github.com/vmware-clarity/core/tree/main/projects/core) - Suite of web components from the Clarity Design System.[39m
[38;5;12m- [39m[38;5;14m[1mCrayons[0m[38;5;12m (https://github.com/freshdesk/crayons) - Collection of web components that adheres to the Freshworks Design System.[39m
[38;5;12m- [39m[38;5;14m[1mFAST Components[0m[38;5;12m (https://github.com/microsoft/fast/tree/master/packages/web-components) - Library of Web Components based on the FAST design language.[39m
[38;5;12m- [39m[38;5;14m[1mFluent UI Web Components[0m[38;5;12m (https://github.com/microsoft/fluentui/tree/master/packages/web-components) - Library of Web Components that supports Microsoft's Fluent design language.[39m
[38;5;12m- [39m[38;5;14m[1mForge Components[0m[38;5;12m (https://github.com/tyler-technologies-oss/forge) - Library of Web Components adhering to the Forge Design System.[39m
[38;5;12m- [39m[38;5;14m[1mGOV.UK Web Components[0m[38;5;12m (https://github.com/tgreyuk/govuk-webcomponents) - Set of encapsulated web components consuming the GOV.UK Design System.[39m
[38;5;12m- [39m[38;5;14m[1mHelix UI[0m[38;5;12m (https://github.com/HelixDesignSystem/helix-ui) - Web Component library for the Helix Design System.[39m
[38;5;12m- [39m[38;5;14m[1mLiquid[0m[38;5;12m (https://github.com/emdgroup-liquid/liquid) - UI component library based on the Liquid Design System.[39m
[38;5;12m- [39m[38;5;14m[1mLyne Components[0m[38;5;12m (https://github.com/lyne-design-system/lyne-components) - Building blocks of the Lyne Design System are based on Web Components.[39m
[38;5;12m- [39m[38;5;14m[1mMaterial Web Components[0m[38;5;12m (https://github.com/material-components/material-web) - Material Design implemented as Web Components.[39m
[38;5;12m- [39m[38;5;14m[1mMomentum UI Web Components[0m[38;5;12m (https://github.com/momentum-design/momentum-ui/tree/master/web-components) - Set of UI components based on Momentum Design.[39m
[38;5;12m- [39m[38;5;14m[1mNord[0m[38;5;12m (https://nordhealth.design) - Nordhealth’s design system for products, digital experiences and brand.[39m
[38;5;12m- [39m[38;5;14m[1mNuML | NUDE Elements[0m[38;5;12m (https://github.com/tenphi/numl) - HTML Framework and Design System based on Web Components and runtime CSS generation.[39m
[38;5;12m- [39m[38;5;14m[1mOutlineJS[0m[38;5;12m (https://github.com/phase2/outline) - Web component based design system starter kit.[39m
[38;5;12m- [39m[38;5;14m[1mPatternFly Elements[0m[38;5;12m (https://github.com/patternfly/patternfly-elements) - Collection of flexible and lightweight Web Components based on the Unified Design Kit.[39m
[38;5;12m- [39m[38;5;14m[1mPharos Design System[0m[38;5;12m (https://github.com/ithaka/pharos) - JSTOR's design system to create cohesive, supportive, and beautiful experiences.[39m
[38;5;12m- [39m[38;5;14m[1mRed Hat Design System[0m[38;5;12m (https://github.com/RedHat-UX/red-hat-design-system) - Web components for building uniform experiences with the Red Hat brand.[39m
[38;5;12m- [39m[38;5;14m[1mSiemens iX Web Components[0m[38;5;12m (https://github.com/siemens/ix/tree/main/packages/core) - Web Components implementing Siemens iX design system.[39m
[38;5;12m- [39m[38;5;14m[1mSpectrum Web Components[0m[38;5;12m (https://github.com/adobe/spectrum-web-components) - Adobe Spectrum design language implementation built with Web Components.[39m
[38;5;12m- [39m[38;5;14m[1mUI5 Web Components[0m[38;5;12m (https://github.com/SAP/ui5-webcomponents) - Set of reusable UI elements implementing SAP Fiori Design Guidelines.[39m
[38;5;12m- [39m[38;5;14m[1mU-M Library Design System[0m[38;5;12m (https://design-system.lib.umich.edu) - University of Michigan Library Design System.[39m
[38;5;12m- [39m[38;5;14m[1mZooplus web components[0m[38;5;12m (https://github.com/zooplus/zoo-web-components) - Set of web components that implement Z+ shop style guide.[39m

[38;2;255;187;0m[4mUse Cases[0m

[38;5;12m- [39m[38;5;14m[1mHow we chose to build our Design System using StencilJS Web Components[0m[38;5;12m (https://medium.com/8451/how-we-chose-to-build-our-design-system-using-stenciljs-web-components-4878c36743c5)[39m
[38;5;12m- [39m[38;5;14m[1mHow searching for a bundle-free React led me to web components[0m[38;5;12m (https://www.bryanbraun.com/2020/08/31/how-searching-for-a-bundle-free-react-led-me-to-web-components/)[39m
[38;5;12m- [39m[38;5;14m[1mReasons Web Components are perfect for a big company[0m[38;5;12m (https://medium.com/@sergicontre/reasons-web-components-are-perfect-for-a-big-company-28790d712ad5)[39m
[38;5;12m- [39m[38;5;14m[1m5 Reasons Web Components Are Perfect for Design Systems[0m[38;5;12m (https://ionicframework.com/blog/5-reasons-web-components-are-perfect-for-design-systems/)[39m
[38;5;12m- [39m[38;5;14m[1mWeb components: the secret ingredient helping power the web[0m[38;5;12m (https://web.dev/web-components-io-2019/)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components for Enterprise. Part 1: Salesforce, Oracle, SAP[0m[38;5;12m (https://dev.to/webpadawan/web-components-for-enterprise-part-1-salesforce-oracle-sap-e70)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components for Enterprise. Part 2: Nuxeo, Ionic, Vaadin[0m[38;5;12m (https://dev.to/webpadawan/web-components-for-enterprise-part-2-nuxeo-ionic-vaadin-22l7)[39m
[38;5;12m- [39m[38;5;14m[1mWhy I use Web Components - My use cases[0m[38;5;12m (https://dev.to/shihn/why-i-use-web-components-my-use-cases-1nip)[39m
[38;5;12m- [39m[38;5;14m[1mWhy we use Web Components[0m[38;5;12m (https://viljamis.com/2019/why-we-use-web-components/) by [39m[38;5;14m[1m@viljamis[0m[38;5;12m (https://twitter.com/viljamis)[39m
[38;5;12m- [39m[38;5;14m[1mWhy we use Web Components[0m[38;5;12m (https://dev.to/ionic/why-we-use-web-components-2c1i) by [39m[38;5;14m[1m@maxlynch[0m[38;5;12m (https://twitter.com/maxlynch)[39m

[38;2;255;187;0m[4mLibraries[0m

[38;2;255;187;0m[4mClass Based[0m

[38;5;12m- [39m[38;5;14m[1mDNA[0m[38;5;12m (https://github.com/chialab/dna) - Progressive Web Components library.[39m
[38;5;12m- [39m[38;5;14m[1melement-js[0m[38;5;12m (https://github.com/webtides/element-js) - Simple and lightweight base classes for web components with a beautiful API.[39m
[38;5;12m- [39m[38;5;14m[1mFAST Element[0m[38;5;12m (https://github.com/microsoft/fast/tree/master/packages/web-components/fast-element) - Lightweight library for building performant, memory-efficient, standards-compliant Web Components.[39m
[38;5;12m- [39m[38;5;14m[1mForge Core[0m[38;5;12m (https://github.com/tyler-technologies-oss/forge-core) - Building blocks and utilities that are used when building Forge Web Components.[39m
[38;5;12m- [39m[38;5;14m[1mJoist[0m[38;5;12m (https://github.com/joist-framework/joist) - Set of small libraries designed to add the bare minimum to web components to make you productive.[39m
[38;5;12m- [39m[38;5;14m[1mLit[0m[38;5;12m (https://lit.dev) - Simple library for building fast, lightweight web components.[39m
[38;5;12m- [39m[38;5;14m[1mLightning Web Components[0m[38;5;12m (https://github.com/salesforce/lwc) - blazing fast, enterprise-grade Web Components foundation.[39m
[38;5;12m- [39m[38;5;14m[1mOmi[0m[38;5;12m (https://github.com/Tencent/omi) - Next generation web framework in 4kb JavaScript (Web Components + JSX + Proxy + Store + Path Updating).[39m
[38;5;12m- [39m[38;5;14m[1mPanel[0m[38;5;12m (https://github.com/mixpanel/panel) - Web Components + Virtual DOM: web standards for powerful UIs.[39m
[38;5;12m- [39m[38;5;14m[1mslim.js[0m[38;5;12m (https://github.com/slimjs/slim.js) - Fast & Robust Front-End Micro-framework based on modern standards.[39m
[38;5;12m- [39m[38;5;14m[1mStencil[0m[38;5;12m (https://github.com/ionic-team/stencil) - Compiler for generating Web Components.[39m
[38;5;12m- [39m[38;5;14m[1mTonic[0m[38;5;12m (https://github.com/optoolco/tonic) - Minimalist, stable, audit friendly component framework.[39m
[38;5;12m- [39m[38;5;14m[1mWebCell[0m[38;5;12m (https://github.com/EasyWebApp/WebCell) - Web Components engine based on VDOM, JSX, MobX & TypeScript.[39m

[38;2;255;187;0m[4mFunctional[0m

[38;5;12m- [39m[38;5;14m[1matomico[0m[38;5;12m (https://github.com/atomicojs/atomico) - Small library for the creation of interfaces based on web components using functions and hooks.[39m
[38;5;12m- [39m[38;5;14m[1mhaunted[0m[38;5;12m (https://github.com/matthewp/haunted) - React's Hooks API implemented for web components.[39m
[38;5;12m- [39m[38;5;14m[1mhybrids[0m[38;5;12m (https://github.com/hybridsjs/hybrids) - UI library for creating Web Components with simple and functional API.[39m
[38;5;12m- [39m[38;5;14m[1mSolid Element[0m[38;5;12m (https://github.com/solidjs/solid/tree/main/packages/solid-element) - Library that extends Solid adding Custom Web Components and extensions.[39m

[38;2;255;187;0m[4mIntegrations[0m

[38;5;12m- [39m[38;5;14m[1member-custom-elements[0m[38;5;12m (https://github.com/Ravenstine/ember-custom-elements) - Render Ember and Glimmer components using custom elements.[39m
[38;5;12m- [39m[38;5;14m[1mpreact-custom-element[0m[38;5;12m (https://github.com/preactjs/preact-custom-element) - Generate/register a custom element from a preact component.[39m
[38;5;12m- [39m[38;5;14m[1m@adobe/react-webcomponent[0m[38;5;12m (https://github.com/adobe/react-webcomponent) - Automate the wrapping of a React component in a custom element.[39m
[38;5;12m- [39m[38;5;14m[1mnuxt-custom-elements[0m[38;5;12m (https://github.com/GrabarzUndPartner/nuxt-custom-elements) - Export your project components as custom elements for integration into external pages.[39m
[38;5;12m- [39m[38;5;14m[1mreact-shadow[0m[38;5;12m (https://github.com/Wildhoney/ReactShadow) - Utilise Shadow DOM in React with all the benefits of style encapsulation.[39m
[38;5;12m- [39m[38;5;14m[1mreactify-wc[0m[38;5;12m (https://github.com/BBKolton/reactify-wc) - Use web components with React properties and functions.[39m
[38;5;12m- [39m[38;5;14m[1mremount[0m[38;5;12m (https://github.com/rstacruz/remount) - Mount React components to the DOM using custom elements.[39m
[38;5;12m- [39m[38;5;14m[1m@riotjs/custom-elements[0m[38;5;12m (https://github.com/riot/custom-elements) - Simple API to create vanilla custom elements with Riot.js.[39m

[38;2;255;187;0m[4mBenchmarks[0m

[38;5;12m- [39m[38;5;14m[1mAll the Ways to Make a Web Component[0m[38;5;12m (https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/)[39m
[38;5;12m- [39m[38;5;14m[1mweb-components-benchmark[0m[38;5;12m (https://vogloblinsky.github.io/web-components-benchmark/) - Benchmark Web Components technologies with various examples.[39m
[38;5;12m- [39m[38;5;14m[1mweb-components-todo[0m[38;5;12m (https://wc-todo.firebaseapp.com/) - The same todo application built in different Web Components libraries for benchmark purpose.[39m

[38;2;255;187;0m[4mFrameworks[0m

[38;2;255;187;0m[4mAngular[0m

[38;5;12m- [39m[38;5;14m[1mAngular Elements Overview[0m[38;5;12m (https://angular.io/guide/elements)[39m
[38;5;12m- [39m[38;5;14m[1mBuilding and consuming Angular Elements as Web Components[0m[38;5;12m (https://indepth.dev/building-and-bundling-web-components/)[39m
[38;5;12m- [39m[38;5;14m[1mHow to use Angular ngModel and ngForms with WebComponents[0m[38;5;12m (https://itnext.io/how-to-use-angular-ngmodel-and-ngforms-with-webcomponents-802bd9e1d3d7)[39m
[38;5;12m- [39m[38;5;14m[1mUsing Web Components in Angular[0m[38;5;12m (https://coryrylan.com/blog/using-web-components-in-angular)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components With Angular Ivy In 6 Steps[0m[38;5;12m (https://www.softwarearchitekt.at/post/2019/05/18/web-components-custom-elements-with-angular-ivy-in-6-steps.aspx)[39m

[38;2;255;187;0m[4mReact[0m

[38;5;12m- [39m[38;5;14m[1m3 Approaches to Integrate React with Custom Elements[0m[38;5;12m (https://css-tricks.com/3-approaches-to-integrate-react-with-custom-elements/)[39m
[38;5;12m- [39m[38;5;14m[1mBuilding Interoperable Web Components That Even Work With React[0m[38;5;12m (https://css-tricks.com/building-interoperable-web-components-react/)[39m
[38;5;12m- [39m[38;5;14m[1mRendering React Components With Custom Elements[0m[38;5;12m (https://guillaumebriday.fr/rendering-react-components-with-custom-elements)[39m
[38;5;12m- [39m[38;5;14m[1mHow to use Web Components in React[0m[38;5;12m (https://www.robinwieruch.de/react-web-components)[39m
[38;5;12m- [39m[38;5;14m[1mUsing Web Components With Next (or Any SSR Framework)[0m[38;5;12m (https://css-tricks.com/using-web-components-with-next-or-any-ssr-framework/)[39m

[38;2;255;187;0m[4mVue[0m

[38;5;12m- [39m[38;5;14m[1mUsing Web Components in Vue[0m[38;5;12m (https://coryrylan.com/blog/using-web-components-in-vue)[39m

[38;2;255;187;0m[4mSvelte[0m

[38;5;12m- [39m[38;5;14m[1mSvelte Custom Element API[0m[38;5;12m (https://svelte.dev/docs#Custom_element_API)[39m
[38;5;12m- [39m[38;5;14m[1mHow to Create a Web Component in Svelte[0m[38;5;12m (https://dev.to/silvio/how-to-create-a-web-components-in-svelte-2g4j)[39m
[38;5;12m- [39m[38;5;14m[1mSvelte Web Component — 5.4KB[0m[38;5;12m (https://itnext.io/svelte-web-component-5-4kb-4afe46590d99)[39m

[38;2;255;187;0m[4mEcosystem[0m

[38;2;255;187;0m[4mMeta Frameworks[0m

[38;5;12m- [39m[38;5;14m[1mAMP[0m[38;5;12m (https://github.com/ampproject/amphtml) - Web component framework to easily create user-first experiences for the web.[39m
[38;5;12m- [39m[38;5;14m[1mEnhance[0m[38;5;12m (https://enhance.dev/docs/) - Web standards-based HTML framework for building lightweight web applications.[39m
[38;5;12m- [39m[38;5;14m[1mluna-js[0m[38;5;12m (https://github.com/webtides/luna-js) - SSR framework that makes working with the WebComponents standard a breeze.[39m
[38;5;12m- [39m[38;5;14m[1mRocket[0m[38;5;12m (https://rocket.modern-web.dev) - Modern web setup for static sites with a sprinkle of JavaScript.[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components Compiler[0m[38;5;12m (https://github.com/ProjectEvergreen/wcc) - Compiler to make server-side rendering of native web components easier.[39m
[38;5;12m- [39m[38;5;14m[1mWebC[0m[38;5;12m (https://github.com/11ty/webc) - Framework-independent standalone HTML serializer for generating markup for web components.[39m

[38;2;255;187;0m[4mStarter Kits[0m

[38;5;12m- [39m[38;5;14m[1mCreate Open Web Components[0m[38;5;12m (https://open-wc.org/docs/development/generator/) - Web component project scaffolding.[39m
[38;5;12m- [39m[38;5;14m[1mcustom-element-boilerplate[0m[38;5;12m (https://github.com/github/custom-element-boilerplate) - Boilerplate for creating a custom element.[39m
[38;5;12m- [39m[38;5;14m[1mhello-web-components[0m[38;5;12m (https://github.com/fernandopasik/hello-web-components) - Simple starter hello world web component written in TypeScript.[39m
[38;5;12m- [39m[38;5;14m[1mnutmeg[0m[38;5;12m (https://github.com/abraham/nutmeg) - Build, test, and publish vanilla Web Components with a little spice.[39m

[38;2;255;187;0m[4mTesting Solutions[0m

[38;5;12m- [39m[38;5;14m[1mcapybara-shadowdom[0m[38;5;12m (https://github.com/yuki24/capybara-shadowdom) - Ruby gem that adds basic support for the Shadow DOM to Capybara.[39m
[38;5;12m- [39m[38;5;14m[1mCypress component tests for Lit[0m[38;5;12m (https://dev.to/simonireilly/cypress-component-tests-for-lit-elements-web-components-45oj) - How to run component tests for a Lit web component with Cypress.[39m
[38;5;12m- [39m[38;5;14m[1mcypress-lit[0m[38;5;12m (https://github.com/simonireilly/cypress-lit) - Test your Lit elements and native web components in Cypress with all the modern browsers.[39m
[38;5;12m- [39m[38;5;14m[1mDeveloping Components: Testing[0m[38;5;12m (https://open-wc.org/guides/developing-components/testing/) - Using @web/test-runner for testing web components in a real browser.[39m
[38;5;12m- [39m[38;5;14m[1mHow To Automate Shadow DOM In Selenium WebDriver[0m[38;5;12m (https://www.lambdatest.com/blog/shadow-dom-in-selenium/) - Locating Shadow DOM elements using Selenium WebDriver in a Maven project.[39m
[38;5;12m- [39m[38;5;14m[1mNative Automation support for Shadow DOM[0m[38;5;12m (https://staleelement.medium.com/native-automation-support-for-shadow-dom-with-webdriverio-and-cypress-chapter-3-26249a589f5e) - Shadow DOM and open-source testing frameworks.[39m
[38;5;12m- [39m[38;5;14m[1mOpen Web Components: Testing[0m[38;5;12m (https://open-wc.org/docs/testing/testing-package/) - Opinionated package that combines and configures testing libraries.[39m
[38;5;12m- [39m[38;5;14m[1mquery-selector-shadow-dom[0m[38;5;12m (https://github.com/webdriverio/query-selector-shadow-dom) - querySelector that can pierce Shadow DOM roots, useful for automated testing.[39m
[38;5;12m- [39m[38;5;14m[1mshadow-automation-selenium[0m[38;5;12m (https://github.com/sukgu/shadow-automation-selenium) - Shadow DOM automation using Selenium.[39m
[38;5;12m- [39m[38;5;14m[1mTesting Shadow DOM elements in Selenium[0m[38;5;12m (https://reflect.run/articles/testing-shadow-dom-elements-in-selenium/) - In Selenium 4, there is now a way to access Shadow DOM nodes.[39m
[38;5;12m- [39m[38;5;14m[1mTest web components with Playwright[0m[38;5;12m (https://alexbilson.dev/plants/technology/test-web-components-with-playwright/) - So you’ve created a native web component or two. How do you test them in popular browsers?[39m
[38;5;12m- [39m[38;5;14m[1mW3C Webdriver conquering automation of Shadow DOM[0m[38;5;12m (https://staleelement.medium.com/w3c-webdriver-conquering-automation-of-shadow-dom-chapter-2-d92c7fe9e74c) - Shadow DOM tree and its interaction with the W3C Webdriver.[39m

[38;2;255;187;0m[4mTools[0m

[38;5;12m- [39m[38;5;14m[1mBacklight[0m[38;5;12m (https://backlight.dev/) — 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.[39m
[38;5;12m- [39m[38;5;14m[1mCustom Elements Locator[0m[38;5;12m (https://github.com/open-wc/locator) - Chrome extension to find custom elements on a page.[39m
[38;5;12m- [39m[38;5;14m[1m@storybook/web-components[0m[38;5;12m (https://www.npmjs.com/package/@storybook/web-components) - UI development environment for plain web-component snippets.[39m
[38;5;12m- [39m[38;5;14m[1mwebcomponents.dev[0m[38;5;12m (https://webcomponents.dev) - Component IDE for web platform developers.[39m
[38;5;12m- [39m[38;5;14m[1mweb-component-analyzer[0m[38;5;12m (https://github.com/runem/web-component-analyzer) - CLI that analyzes web components and emits documentation / diagnostics.[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components Codemods[0m[38;5;12m (https://github.com/kcmr/web-components-codemods) - Codemods for Web Components.[39m

[38;2;255;187;0m[4mBooks[0m

[38;5;12m- [39m[38;5;14m[1mWeb Components in Action[0m[38;5;12m (https://www.manning.com/books/web-components-in-action) - Book by Ben Farrell, available at Manning early release program.[39m
[38;5;12m- [39m[38;5;14m[1mWeb Component Essentials[0m[38;5;12m (https://leanpub.com/web-component-essentials) - Book by Cory Rylan, early preview edition available at Leanpub.[39m

[38;2;255;187;0m[4mTutorials[0m

[38;5;12m- [39m[38;5;14m[1mBuilding Web Components with Vanilla JavaScript[0m[38;5;12m (https://dev.to/aspittel/building-web-components-with-vanilla-javascript--jho)[39m
[38;5;12m- [39m[38;5;14m[1mCreating a Custom Element from Scratch[0m[38;5;12m (https://css-tricks.com/creating-a-custom-element-from-scratch/)[39m
[38;5;12m- [39m[38;5;14m[1mCreating a Reusable Avatar Web Component[0m[38;5;12m (https://marcoslooten.com/blog/creating-a-reusable-avatar-web-component/)[39m
[38;5;12m- [39m[38;5;14m[1mCreating Web Components with Stencil[0m[38;5;12m (https://auth0.com/blog/creating-web-components-with-stencil/)[39m
[38;5;12m- [39m[38;5;14m[1mEncapsulating Style and Structure with Shadow DOM[0m[38;5;12m (https://css-tricks.com/encapsulating-style-and-structure-with-shadow-dom/)[39m
[38;5;12m- [39m[38;5;14m[1mGetting started with LitElement and TypeScript[0m[38;5;12m (https://labs.thisdot.co/blog/getting-started-with-litelement-and-typescript)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components: from zero to hero[0m[38;5;12m (https://dev.to/thepassle/web-components-from-zero-to-hero-4n4m)[39m
[38;5;12m- [39m[38;5;14m[1mDeep Dive: Web Components & Dependency Injection – The Experiment[0m[38;5;12m (https://www.thinktecture.com/web-components/dependency-injection/)[39m
[38;5;12m- [39m[38;5;14m[1mHandling data with Web Components[0m[38;5;12m (https://itnext.io/handling-data-with-web-components-9e7e4a452e6e)[39m
[38;5;12m- [39m[38;5;14m[1mHow to use D3js with WebComponents[0m[38;5;12m (https://towardsdatascience.com/how-to-use-d3js-with-webcomponents-a75ae4f980de)[39m
[38;5;12m- [39m[38;5;14m[1mNavigation Lifecycle using Vaadin Router, LitElement and TypeScript[0m[38;5;12m (https://labs.thisdot.co/blog/navigation-lifecycle-using-vaadin-router-litelement-and-typescript)[39m
[38;5;12m- [39m[38;5;14m[1mRecreating The Arduino Pushbutton Using SVG And [0m[38;5;12m (https://www.smashingmagazine.com/2020/01/recreating-arduino-pushbutton-svg/)[39m
[38;5;12m- [39m[38;5;14m[1mRouting Management with LitElement and TypeScript[0m[38;5;12m (https://labs.thisdot.co/blog/routing-management-with-litelement)[39m
[38;5;12m- [39m[38;5;14m[1mSnake-Eating Game Making with Web Components of Omi and MVP Architecture[0m[38;5;12m (https://dev.to/dntzhang/snake-eating-game-making-with-web-components-of-omi-and-mvp-architecture-206)[39m
[38;5;12m- [39m[38;5;14m[1mStencil – Web Components On Steroids[0m[38;5;12m (https://www.thinktecture.com/web-components/stenciljs-web-components-on-steroids/)[39m
[38;5;12m- [39m[38;5;14m[1mUsing Modern Web Components[0m[38;5;12m (https://coryrylan.com/blog/using-modern-web-components)[39m
[38;5;12m- [39m[38;5;14m[1mUsing Web Components in WordPress is Easier Than You Think[0m[38;5;12m (https://css-tricks.com/using-web-components-in-wordpress-is-easier-than-you-think/)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components 101: Framework Comparison[0m[38;5;12m (https://coderpad.io/blog/development/web-components-101-framework-comparison/)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components 101: Lit Framework[0m[38;5;12m (https://coderpad.io/blog/development/web-components-101-lit-framework/)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components Tools: A Comparison[0m[38;5;12m (https://www.nexmo.com/blog/2020/05/20/web-components-tools-a-comparison)[39m
[38;5;12m- [39m[38;5;14m[1mWhere to begin building Web Components? - The Basics[0m[38;5;12m (https://dev.to/alangdm/where-to-begin-building-web-components-the-basics-3b78)[39m
[38;5;12m- [39m[38;5;14m[1mWhere to begin building Web Components? - Class-based Libraries[0m[38;5;12m (https://dev.to/alangdm/where-to-begin-building-web-components-class-based-libraries-18m6)[39m

[38;2;255;187;0m[4mInsights[0m

[38;2;255;187;0m[4mPodcasts[0m

[38;5;12m- [39m[38;5;14m[1mCode[0m[38;5;12mish[39m[38;5;14m[1m , episode 38: Building with Web Components[0m[38;5;12m (https://www.heroku.com/podcasts/codeish/38-building-with-web-components)[39m
[38;5;12m- [39m[38;5;14m[1mFrontend Happy Hour, episode 62: Web Components - shots of shadow DOM[0m[38;5;12m (https://frontendhappyhour.com/episodes/web-components-shots-of-shadow-dom/)[39m
[38;5;12m- [39m[38;5;14m[1mLabs Talk - Web Components with Peter Muessig[0m[38;5;12m (https://labstalk.buzzsprout.com/993481/3932975-web-components-with-peter-muessig)[39m
[38;5;12m- [39m[38;5;14m[1mReal Talk JavaScript, episode 7: Custom Web Components with Rob Wormald[0m[38;5;12m (https://realtalkjavascript.simplecast.fm/eaf3db9e)[39m
[38;5;12m- [39m[38;5;14m[1mReal Talk JavaScript, episode 101: Back to Basics with Native HTML and LitElement[0m[38;5;12m (https://realtalkjavascript.simplecast.com/episodes/episode-101-back-to-basics-with-native-html-and-litelement)[39m

[38;2;255;187;0m[4mPresentations[0m

[38;5;12m- [39m[38;5;14m[1mAre Web Components the Betamax of web development?[0m[38;5;12m (https://noti.st/lostinbrittany/EjUZyd/are-web-components-the-betamax-of-web-development) by [39m[38;5;14m[1m@lostinbrittany[0m[38;5;12m (https://twitter.com/lostinbrittany)[39m
[38;5;12m- [39m[38;5;14m[1mDesigning Standard Systems[0m[38;5;12m (https://drive.google.com/file/d/1ALFiWOFU0UAGUpaZPMIVnoADs9_REtL5/view) by [39m[38;5;14m[1m@stefsull[0m[38;5;12m (https://twitter.com/stefsull) and [39m[38;5;14m[1m@bferrua[0m[38;5;12m (https://twitter.com/bferrua)[39m
[38;5;12m- [39m[38;5;14m[1mFrontend Architecture for Scalable Design Systems[0m[38;5;12m (https://events.drupal.org/seattle2019/sessions/design-system-architecture-pattern-lab-twig-and-web-components) by [39m[38;5;14m[1m@salem_cobalt[0m[38;5;12m (https://twitter.com/salem_cobalt)[39m
[38;5;12m- [39m[38;5;14m[1mlit-apollo: Data-Driven Components that Use the Platform[0m[38;5;12m (https://apolloelements.dev/using-lit-apollo/) by [39m[38;5;14m[1m@PowersBenny[0m[38;5;12m (https://twitter.com/PowersBenny)[39m
[38;5;12m- [39m[38;5;14m[1mMastering Shadow DOM[0m[38;5;12m (https://martine-dowden.github.io/portfolio/presentation/mastering-shadow-dom) by [39m[38;5;14m[1m@Martine_Dowden[0m[38;5;12m (https://twitter.com/Martine_Dowden)[39m
[38;5;12m- [39m[38;5;14m[1mModernizing Large Frontends with Web Components[0m[38;5;12m (https://speakerdeck.com/samjulien/modernizing-large-frontends-with-web-components) by [39m[38;5;14m[1m@samjulien[0m[38;5;12m (https://twitter.com/samjulien)[39m
[38;5;12m- [39m[38;5;14m[1mShadow DOM: off the beaten track[0m[38;5;12m (https://docs.google.com/presentation/d/1wi74YiTLtLSfgjyccKm5LxYp9k8aeJda0AekWV5mqJI/edit?usp=sharing) by [39m[38;5;14m[1m@serhiikulykov[0m[38;5;12m (https://twitter.com/serhiikulykov)[39m
[38;5;12m-[39m[38;5;12m [39m[38;5;14m[1mUsing[0m[38;5;14m[1m [0m[38;5;14m[1mWeb[0m[38;5;14m[1m [0m[38;5;14m[1mComponents[0m[38;5;14m[1m [0m[38;5;14m[1mto[0m[38;5;14m[1m [0m[38;5;14m[1mBuild[0m[38;5;14m[1m [0m[38;5;14m[1ma[0m[38;5;14m[1m [0m[38;5;14m[1mFramework-agnostic[0m[38;5;14m[1m [0m[38;5;14m[1mUI[0m[38;5;14m[1m [0m[38;5;14m[1mLibrary[0m[38;5;12m [39m[38;5;12m(https://gotochgo.com/2019/sessions/866/using-web-components-to-build-a-framework-agnostic-ui-library)[39m[38;5;12m [39m[38;5;12mby[39m[38;5;12m [39m[38;5;14m[1m@brianbouril[0m[38;5;12m [39m[38;5;12m(https://twitter.com/brianbouril)[39m[38;5;12m [39m[38;5;12mand[39m[38;5;12m [39m[38;5;14m[1m@danciupuliga[0m[38;5;12m [39m
[38;5;12m(https://twitter.com/danciupuliga)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components and the AOM[0m[38;5;12m (https://decks.tink.uk/2019/jsconf/index.html) by [39m[38;5;14m[1m@LeonieWatson[0m[38;5;12m (https://twitter.com/LeonieWatson)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components and Styles Scoping[0m[38;5;12m (https://www.dropbox.com/s/wdh9uufjui5htll/Web-Components-and-Styles-Scoping-by-bashmish-FrontMania-2018.pdf) by [39m[38;5;14m[1m@bashmish[0m[38;5;12m (https://twitter.com/bashmish)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components can do that?![0m[38;5;12m (https://slides.com/vogloblinsky/web-components-can-do-that) by [39m[38;5;14m[1m@vogloblinsky[0m[38;5;12m (https://twitter.com/vogloblinsky)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components: Introduction and State of the Art[0m[38;5;12m (https://webcomponents.dev/blog/web-components-slides/) by [39m[38;5;14m[1m@webcomp_dev[0m[38;5;12m (https://twitter.com/webcomp_dev)[39m

[38;2;255;187;0m[4mTalks[0m

[38;5;12m- [39m[38;5;14m[1mBetter Apps: Delivering Universal UI Patterns as Web Components[0m[38;5;12m (https://youtu.be/mtHf7crZZIQ) by [39m[38;5;14m[1m@janmiksovsky[0m[38;5;12m (https://twitter.com/janmiksovsky)[39m
[38;5;12m- [39m[38;5;14m[1mCustom Web Shadow Elements, or Whatever…[0m[38;5;12m (https://vimeo.com/364370506) by [39m[38;5;14m[1m@aerotwist[0m[38;5;12m (https://twitter.com/aerotwist)[39m
[38;5;12m- [39m[38;5;14m[1mStyling and Theming Web Components[0m[38;5;12m (https://youtu.be/FM7ROEVPA4k) by [39m[38;5;14m[1m@justinfagnani[0m[38;5;12m (https://twitter.com/justinfagnani)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components at Enterprise Scale[0m[38;5;12m (https://youtu.be/iFp-P2UJT_Y) by [39m[38;5;14m[1m@diervo[0m[38;5;12m (https://twitter.com/diervo)[39m

[38;2;255;187;0m[4mUsage Metrics[0m

[38;5;12m- [39m[38;5;14m[1mChrome Platform Status: [0m[48;5;235m[38;5;249m[1mCustomElementRegistryDefine[0m[38;5;12m (https://chromestatus.com/metrics/feature/timeline/popularity/1689)[39m
[38;5;12m- [39m[38;5;14m[1mChrome Platform Status: [0m[48;5;235m[38;5;249m[1mElementAttachShadow[0m[38;5;12m (https://chromestatus.com/metrics/feature/timeline/popularity/804)[39m
[38;5;12m- [39m[38;5;14m[1mChrome Platform Status: [0m[48;5;235m[38;5;249m[1mHTMLTemplateElement[0m[38;5;12m (https://chromestatus.com/metrics/feature/timeline/popularity/2769)[39m

[38;2;255;187;0m[4mProposals[0m

[38;2;255;187;0m[4mForm-associated Custom Elements[0m

[38;5;12m- [39m[38;5;14m[1mForm Participation API Explained[0m[38;5;12m (https://docs.google.com/document/d/1JO8puctCSpW-ZYGU8lF-h4FWRIDQNDVexzHoOQ2iQmY/edit?usp=sharing) - Document by Google Chrome team.[39m
[38;5;12m- [39m[38;5;14m[1mForm-associated custom elements[0m[38;5;12m (https://www.chromestatus.com/features/4708990554472448) - Feature in Chrome platform status.[39m
[38;5;12m- [39m[38;5;14m[1mweb-platform-tests[0m[38;5;12m (https://github.com/web-platform-tests/wpt/tree/master/custom-elements/form-associated)[39m

[38;2;255;187;0m[4mConstructable Stylesheet Objects[0m

[38;5;12m- [39m[38;5;14m[1mSpecification Draft[0m[38;5;12m (https://wicg.github.io/construct-stylesheets/)[39m
[38;5;12m- [39m[38;5;14m[1mweb-platform-tests[0m[38;5;12m (https://github.com/web-platform-tests/wpt/blob/master/css/cssom/CSSStyleSheet-constructable.html)[39m
[38;5;12m- [39m[38;5;14m[1mExplainer[0m[38;5;12m (https://github.com/WICG/construct-stylesheets/blob/gh-pages/explainer.md)[39m
[38;5;12m- [39m[38;5;14m[1mConstructable Stylesheets[0m[38;5;12m (https://www.chromestatus.com/feature/5394843094220800) - Feature in Chrome platform status.[39m

[38;2;255;187;0m[4mCustom State Pseudo Class[0m

[38;5;12m- [39m[38;5;14m[1mBlink: Intent to implement[0m[38;5;12m (https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/CApU9QIu3TM)[39m
[38;5;12m- [39m[48;5;235m[38;5;249m[1mElementInternals[0m[38;5;14m[1m's [0m[48;5;235m[38;5;249m[1mstates[0m[38;5;14m[1m property and the [0m[48;5;235m[38;5;249m[1m:state()[0m[38;5;14m[1m pseudo class[0m[38;5;12m (https://github.com/w3c/webcomponents/blob/gh-pages/proposals/custom-states-and-state-pseudo-class.md)[39m

[38;2;255;187;0m[4mMiscellaneous[0m

[38;5;12m- [39m[38;5;14m[1mbruck[0m[38;5;12m (https://github.com/Heydon/bruck) - Prototyping system built with web components and the Houdini Paint API.[39m
[38;5;12m- [39m[38;5;14m[1mVaadin Directory[0m[38;5;12m (https://vaadin.com/directory) - Publish, discuss and rate web components[39m
[38;5;12m- [39m[38;5;14m[1mwebcomponents.org[0m[38;5;12m (http://webcomponents.org/) - Discuss &amp; share web components.[39m

[38;2;255;187;0m[4mArchive[0m

[38;2;255;187;0m[4mPolyfills[0m

[38;5;12mModern browsers supports web components standards without any of the polyfills listed below.[39m
[38;5;12mThe only notable exception is that customized built-in elements are rejected by WebKit (Safari).[39m

[38;2;255;187;0m[4mCustom Elements polyfills[0m

[38;5;12m- [39m[38;5;14m[1m@webcomponents/custom-elements[0m[38;5;12m (https://github.com/webcomponents/polyfills/tree/master/packages/custom-elements) - Custom Elements polyfill by Polymer team.[39m
[38;5;12m- [39m[38;5;14m[1mdocument-register-element[0m[38;5;12m (https://github.com/WebReflection/document-register-element) - Custom Elements polyfill by Andrea Giammarchi.[39m

[38;2;255;187;0m[4mCustomized Built-in Elements polyfills[0m

[38;5;12m- [39m[38;5;14m[1m@corpuscule/custom-builtin-elements[0m[38;5;12m (https://github.com/corpusculejs/custom-builtin-elements) - Customized built-in elements polyfill by [39m[38;5;14m[1mCorpusculeJS[0m[38;5;12m (https://github.com/corpusculejs).[39m
[38;5;12m- [39m[38;5;14m[1m@ungap/custom-elements-builtin[0m[38;5;12m (https://github.com/ungap/custom-elements-builtin) - Customized built-in elements polyfill by [39m[38;5;14m[1mungap project[0m[38;5;12m (https://ungap.github.io).[39m

[38;2;255;187;0m[4mShadow DOM shims[0m

[38;5;12m- [39m[38;5;14m[1m@webcomponents/shadydom[0m[38;5;12m (https://github.com/webcomponents/polyfills/tree/master/packages/shadydom) - ShadowDOM v1 shim.[39m
[38;5;12m- [39m[38;5;14m[1m@webcomponents/shadycss[0m[38;5;12m (https://github.com/webcomponents/polyfills/tree/master/packages/shadycss) - ShadowDOM style encapsulation shim.[39m
[38;5;12m- [39m[38;5;14m[1m@lwc/synthetic-shadow[0m[38;5;12m (https://github.com/salesforce/lwc/blob/master/packages/@lwc/synthetic-shadow) - Shadow DOM polyfill by [39m[38;5;14m[1mLWC[0m[38;5;12m (https://lwc.dev).[39m

[38;2;255;187;0m[4mHTML Templates polyfills[0m

[38;5;12m- [39m[38;5;14m[1m@webcomponents/template[0m[38;5;12m (https://github.com/webcomponents/polyfills/tree/master/packages/template) - Minimal polyfill for [39m[38;5;12m.[39m
[38;5;12m- [39m[38;5;14m[1m@ungap/import-node[0m[38;5;12m (https://github.com/ungap/import-node) - An [39m[48;5;235m[38;5;249mimportNode[49m[39m[38;5;12m polyfill for IE11 by [39m[38;5;14m[1mungap project[0m[38;5;12m (https://ungap.github.io).[39m

[38;2;255;187;0m[4mHistory[0m

[38;5;12mThe articles below represent a long story of the Web Components specifications on the way towards the standardization.[39m
[38;5;12mSome of them refer to earlier, so-called "v0" Shadow DOM and Custom Elements specs, and abandoned HTML Imports spec.[39m
[38;5;12mThese materials are here for historical reasons only, they are grouped by years and listed in chronological order.[39m

[38;2;255;187;0m[4m2019[0m

[38;5;12m- [39m[38;5;14m[1mA history of the HTML slot element[0m[38;5;12m (https://component.kitchen/blog/posts/a-history-of-the-html-slot-element)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components for Cross-Framework Component Libraries[0m[38;5;12m (https://codeburst.io/web-components-for-cross-framework-component-libraries-2647741f9470)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components in 2019: Part 1[0m[38;5;12m (https://codeburst.io/web-components-in-2019-part-1-6bd7251edce5)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components in 2019: Part 2[0m[38;5;12m (https://codeburst.io/web-components-in-2019-part-2-a7de8c770c5a)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components in 2019: Part 3[0m[38;5;12m (https://codeburst.io/web-components-in-2019-part-3-e725b781a414)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components in 2019: Part 4[0m[38;5;12m (https://codeburst.io/web-components-in-2019-part-4-7fe8e63a4dee)[39m
[38;5;12m- [39m[38;5;14m[1mDevelopments in Web Components I’m excited about in 2019[0m[38;5;12m (https://medium.com/angular-in-depth/developments-in-web-components-im-excited-about-in-2019-3ae7751c2f64)[39m

[38;2;255;187;0m[4m2018[0m

[38;5;12m- [39m[38;5;14m[1mStyling Accessibility: A Web Components Approach[0m[38;5;12m (https://medium.com/@cfscorreia/styling-accessibility-a-web-components-approach-dc2aa8123eb2)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components 101: An Introduction to Web Components[0m[38;5;12m (https://www.telerik.com/blogs/web-components-101-an-introduction-to-web-components)[39m
[38;5;12m- [39m[38;5;14m[1mGet started with Vue web components[0m[38;5;12m (https://medium.com/@royprins/get-started-with-vue-web-components-593b3d5b3200)[39m
[38;5;12m- [39m[38;5;14m[1m6 Reasons You Should Use Native Web Components[0m[38;5;12m (https://codeburst.io/6-reasons-you-should-use-native-web-components-b45e18e069c2)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components in 2018[0m[38;5;12m (https://www.sitepen.com/blog/web-components-in-2018)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components Introduction: Creating Custom HTML Elements in 2018[0m[38;5;12m (https://www.grapecity.com/en/blogs/web-components-introduction-creating-custom-html-elements-2018)[39m
[38;5;12m- [39m[38;5;14m[1mCreate & Publish Web Components With Vue CLI 3[0m[38;5;12m (https://vuejsdevelopers.com/2018/05/21/vue-js-web-component/)[39m
[38;5;12m- [39m[38;5;14m[1mExtending Native DOM Elements with Web Components[0m[38;5;12m (https://medium.com/revillweb/extending-native-dom-elements-with-web-components-233350c8e86a)[39m

[38;2;255;187;0m[4m2017[0m

[38;5;12m- [39m[38;5;14m[1mStyling is critical to web component reuse, but may prove difficult in practice[0m[38;5;12m (https://component.kitchen/blog/posts/styling-is-critical-to-web-component-reuse-but-may-prove-difficult-in-practice)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components: The Long Game[0m[38;5;12m (https://infrequently.org/2017/10/web-components-the-long-game/)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components: Just in the Nick of Time (Polymer Summit 2017)[0m[38;5;12m (https://youtu.be/y-8Lmg5Gobw)[39m
[38;5;12m- [39m[38;5;14m[1mUsing Web Components in Ionic (Polymer Summit 2017)[0m[38;5;12m (https://youtu.be/UfD-k7aHkQE)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components for VR (Polymer Summit 2017)[0m[38;5;12m (https://youtu.be/8GmTu2JF4-0)[39m
[38;5;12m- [39m[38;5;14m[1mBuilding UI at Enterprise Scale with Web Components (Polymer Summit 2017)[0m[38;5;12m (https://youtu.be/FJ2KEvzlyo4)[39m
[38;5;12m- [39m[38;5;14m[1mCustom Elements Everywhere (Polymer Summit 2017)[0m[38;5;12m (https://youtu.be/sK1ODp0nDbM)[39m
[38;5;12m- [39m[38;5;14m[1mEvolving the Next Generation of Polymer Elements (Polymer Summit 2017)[0m[38;5;12m (https://youtu.be/rvpJ5O0W_6A)[39m
[38;5;12m- [39m[38;5;14m[1mPolymer @ YouTube (Polymer Summit 2017)[0m[38;5;12m (https://youtu.be/tNulrEbTQf8)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components for CMS (Polymer Summit 2017)[0m[38;5;12m (https://youtu.be/c-WDHG6rrdU)[39m
[38;5;12m- [39m[38;5;14m[1mAn intro to web components with otters[0m[38;5;12m (https://meowni.ca/posts/web-components-with-otters/)[39m
[38;5;12m- [39m[38;5;14m[1mThe broken promise of Web Components[0m[38;5;12m (https://dmitriid.com/blog/2017/03/the-broken-promise-of-web-components/)[39m
[38;5;12m- [39m[38;5;14m[1mRegarding the broken promise of Web Components[0m[38;5;12m (http://robdodson.me/regarding-the-broken-promise-of-web-components/)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components v1 - the next generation[0m[38;5;12m (https://web.dev/webcomponents-org/)[39m

[38;2;255;187;0m[4m2016[0m

[38;5;12m- [39m[38;5;14m[1mIntroducing Custom Elements[0m[38;5;12m (https://webkit.org/blog/7027/introducing-custom-elements/)[39m
[38;5;12m- [39m[38;5;14m[1mThe Case for Custom Elements: Part 1[0m[38;5;12m (https://medium.com/dev-channel/the-case-for-custom-elements-part-1-65d807b4b439)[39m
[38;5;12m- [39m[38;5;14m[1mThe Case for Custom Elements: Part 2[0m[38;5;12m (https://medium.com/dev-channel/the-case-for-custom-elements-part-2-2efe42ce9133)[39m
[38;5;12m- [39m[38;5;14m[1mDemythstifying Web Components[0m[38;5;12m (http://www.backalleycoder.com/2016/08/26/demythstifying-web-components/)[39m
[38;5;12m- [39m[38;5;14m[1mExtensible web components[0m[38;5;12m (https://adactio.com/journal/11052)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Component Challenges[0m[38;5;12m (https://blog.revillweb.com/web-component-challenges-a09ebc598d65)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components and progressive enhancement[0m[38;5;12m (https://onishi.ltd/articles/2016/08/web-components-and-progressive-enhancement/)[39m
[38;5;12m- [39m[38;5;14m[1mUpdate on standardizing Shadow DOM and Custom Elements[0m[38;5;12m (https://annevankesteren.nl/2015/07/shadow-dom-custom-elements-update)[39m
[38;5;12m- [39m[38;5;14m[1mWhat's New in Shadow DOM v1 (by examples)[0m[38;5;12m (https://hayatoito.github.io/2016/shadowdomv1/)[39m
[38;5;12m- [39m[38;5;14m[1mWhy web components are so important[0m[38;5;12m (https://blog.revillweb.com/why-web-components-are-so-important-66ad0bd4807a)[39m
[38;5;12m- [39m[38;5;14m[1mUnderstanding Web Components[0m[38;5;12m (https://medium.com/the-ui-files/understanding-web-components-d051baa66019)[39m

[38;2;255;187;0m[4m2015[0m

[38;5;12m- [39m[38;5;14m[1mIntroducing Slot-Based Shadow DOM API[0m[38;5;12m (https://webkit.org/blog/4096/introducing-shadow-dom-api/)[39m
[38;5;12m- [39m[38;5;14m[1mThere is an Element for that[0m[38;5;12m (https://medium.com/synsugar/there-is-an-element-for-that-a9fcdafe4a25)[39m
[38;5;12m- [39m[38;5;14m[1mWhat happened to Web Components?[0m[38;5;12m (https://2ality.com/2015/08/web-component-status.html)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components and their role in the future of web development[0m[38;5;12m (http://kaytcat.github.io/web-components/)[39m
[38;5;12m- [39m[38;5;14m[1mMicrosoft Edge and Web Components[0m[38;5;12m (https://blogs.windows.com/msedgedev/2015/07/15/microsoft-edge-and-web-components/)[39m
[38;5;12m- [39m[38;5;14m[1mBringing componentization to the web: An overview of Web Components[0m[38;5;12m (https://blogs.windows.com/msedgedev/2015/07/14/bringing-componentization-to-the-web-an-overview-of-web-components/)[39m
[38;5;12m- [39m[38;5;14m[1mWhy Web Components will make the web a better place for our users[0m[38;5;12m (https://medium.com/@kaelig/why-web-components-will-make-the-web-a-better-place-for-our-users-38dc3154fc1d)[39m
[38;5;12m- [39m[38;5;14m[1mPractical Questions around Web Components[0m[38;5;12m (https://www.ianfeather.co.uk/practical-questions-around-web-components/)[39m
[38;5;12m- [39m[38;5;14m[1mThe state of Web Components[0m[38;5;12m (https://hacks.mozilla.org/2015/06/the-state-of-web-components/)[39m

[38;2;255;187;0m[4m2014[0m

[38;5;12m- [39m[38;5;14m[1mA No-Nonsense Guide to Web Components, Part 1: The Specs[0m[38;5;12m (http://cbateman.com/blog/a-no-nonsense-guide-to-web-components-part-1-the-specs/)[39m
[38;5;12m- [39m[38;5;14m[1mA No-Nonsense Guide to Web Components, Part 2: Practical Use[0m[38;5;12m (http://cbateman.com/blog/a-no-nonsense-guide-to-web-components-part-2-practical-use/)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components + Backbone: A Game-Changing Combination[0m[38;5;12m (https://youtu.be/dztuKgjk0Bg)[39m
[38;5;12m- [39m[38;5;14m[1mMozilla and Web Components: Update[0m[38;5;12m (https://hacks.mozilla.org/2014/12/mozilla-and-web-components/)[39m
[38;5;12m- [39m[38;5;14m[1mServer-less applications powered by Web Components[0m[38;5;12m (https://youtu.be/MdcD1rNkNLE)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components and the Future of CSS[0m[38;5;12m (https://youtu.be/QHxrr6Q82yI)[39m
[38;5;12m- [39m[38;5;14m[1mEasy composition and reuse with Web Components[0m[38;5;12m (https://youtu.be/6vcQlD-jadk)[39m
[38;5;12m- [39m[38;5;14m[1mLet’s build some apps with Polymer![0m[38;5;12m (https://youtu.be/kV0hgdMpH28)[39m
[38;5;12m- [39m[38;5;14m[1mPolymer: State of the Union[0m[38;5;12m (https://youtu.be/0LT6W5QVCJI)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components 101: An Introduction to Fundamental Changes in HTML[0m[38;5;12m (https://youtu.be/hEzmy93zr0Y?t=540)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components 201: Designing Web Components for Reuse[0m[38;5;12m (https://youtu.be/dwxaG-eoxdU)[39m
[38;5;12m- [39m[38;5;14m[1mWhy Web Components — Does the Web Really Need Another Component?[0m[38;5;12m (https://medium.com/@shaunwalla/why-web-components-does-the-web-really-need-another-component-4af010b6446)[39m
[38;5;12m- [39m[38;5;14m[1m“Don’t stop thinking about tomorrow” - AngularJS and Web Components[0m[38;5;12m (https://youtu.be/gSTNTXtQwaY)[39m
[38;5;12m- [39m[38;5;14m[1mMulti-device Apps with Web Components[0m[38;5;12m (https://youtu.be/kn0y7uugO0Y)[39m
[38;5;12m- [39m[38;5;14m[1mAs I Walk Through The Valley Of The Shadow Of DOM[0m[38;5;12m (https://youtu.be/nbsWP2cPhhU)[39m
[38;5;12m- [39m[38;5;14m[1mWhy Web Components Are Ready For Production[0m[38;5;12m (https://www.telerik.com/blogs/web-components-ready-production)[39m
[38;5;12m- [39m[38;5;14m[1mThe State of the Componentised Web[0m[38;5;12m (https://www.leggetter.co.uk/2014/08/06/state-componentised-web.html)[39m
[38;5;12m- [39m[38;5;14m[1mAn Addendum to Why Web Components Aren't Ready for Production Yet[0m[38;5;12m (https://www.tjvantoll.com/2014/07/18/an-addendum-to-why-web-components-arent-ready-for-production-yet/)[39m
[38;5;12m- [39m[38;5;14m[1mWhy Web Components Aren't Ready for Production... Yet[0m[38;5;12m (https://www.telerik.com/blogs/web-components-arent-ready-production-yet)[39m
[38;5;12m- [39m[38;5;14m[1mComponent Interop With React And Custom Elements[0m[38;5;12m (https://addyosmani.com/blog/component-interop-with-react-and-custom-elements/)[39m
[38;5;12m- [39m[38;5;14m[1mAccessibility of Web Components[0m[38;5;12m (https://youtu.be/BgvDZZ8Ms8c)[39m
[38;5;12m- [39m[38;5;14m[1mComponentize The Web: Back To The Browser![0m[38;5;12m (https://youtu.be/GOPXVLxp9Nc)[39m
[38;5;12m- [39m[38;5;14m[1mGoogle I/O 2014 - Polymer and the Web Components revolution[0m[38;5;12m (https://youtu.be/yRbOSdAe_JU)[39m
[38;5;12m- [39m[38;5;14m[1mGoogle I/O 2014 - Polymer and Web Components change everything you know about Web development[0m[38;5;12m (https://youtu.be/8OJ7ih8EE7s)[39m
[38;5;12m- [39m[38;5;14m[1mGoogle I/O 2014 - Unlock the next era of UI development with Polymer[0m[38;5;12m (https://youtu.be/HKrYfrAzqFA)[39m
[38;5;12m- [39m[38;5;14m[1mMaking Polymer Elements Accessible[0m[38;5;12m (https://youtu.be/_IBiXfxhF-A)[39m
[38;5;12m- [39m[38;5;14m[1mBuilding an Accessible Disclosure Button – using Web Components[0m[38;5;12m (https://developer.paciellogroup.com/blog/2014/06/accessible-disclosure-button-using-web-components/)[39m
[38;5;12m- [39m[38;5;14m[1mThe Road to Web Components[0m[38;5;12m (https://youtu.be/yLyyXHhSl8w)[39m
[38;5;12m- [39m[38;5;14m[1mThe Web Components Revolution is Here[0m[38;5;12m (https://youtu.be/3QLmAm9xtnU)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components: A chance to create the future[0m[38;5;12m (https://youtu.be/JUzjr1bIRUg)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Component Mashups at 3 a.m.[0m[38;5;12m (https://youtu.be/75EuHl6CSTo)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components Tools & Libraries[0m[38;5;12m (https://youtu.be/iPmN4CvLGJc)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components Can Do That?![0m[38;5;12m (https://addyosmani.com/fitc-wccdt/)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components and you – dangers to avoid[0m[38;5;12m (https://christianheilmann.com/2014/04/18/web-components-and-you-dangers-to-avoid/)[39m
[38;5;12m- [39m[38;5;14m[1mHTML as Custom Elements[0m[38;5;12m (https://github.com/domenic/html-as-custom-elements)[39m
[38;5;12m- [39m[38;5;14m[1mThe Web's Declarative, Composable Future[0m[38;5;12m (https://addyosmani.com/blog/the-webs-declarative-composable-future/)[39m
[38;5;12m- [39m[38;5;14m[1mUsing Polymer to Create Web Components[0m[38;5;12m (https://code.tutsplus.com/tutorials/using-polymer-to-create-web-components--cms-20475)[39m
[38;5;12m- [39m[38;5;14m[1mThe Shadow DOM Diaries[0m[38;5;12m (https://gist.github.com/dglazkov/efd2deec54f65aa86f2e)[39m
[38;5;12m- [39m[38;5;14m[1mA Detailed Introduction To Custom Elements[0m[38;5;12m (https://www.smashingmagazine.com/2014/03/introduction-to-custom-elements/)[39m

[38;2;255;187;0m[4m2013[0m

[38;5;12m- [39m[38;5;14m[1mA future called Web Components[0m[38;5;12m (https://speakerdeck.com/zenorocha/a-future-called-web-components)[39m
[38;5;12m- [39m[38;5;14m[1mBuilding Mobile Web Applications With Brick[0m[38;5;12m (https://youtu.be/dW2ib0bkxGQ)[39m
[38;5;12m- [39m[38;5;14m[1mPolymer: declarative, encapsulated, and reusable components for the web[0m[38;5;12m (https://youtu.be/DH1vTVkqCDQ)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components: Why you're already an expert[0m[38;5;12m (https://youtu.be/s1PTPZwzQA4)[39m
[38;5;12m- [39m[38;5;14m[1mYo Polymer: a new way of building web apps[0m[38;5;12m (https://youtu.be/booRxAJblwM)[39m
[38;5;12m- [39m[38;5;14m[1mPerformance and Custom Elements[0m[38;5;12m (https://www.stevesouders.com/blog/2013/11/26/performance-and-custom-elements/)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components Revolution[0m[38;5;12m (https://robdodson.github.io/webcomponents-revolution/)[39m
[38;5;12m- [39m[38;5;14m[1mA Guide to Web Components[0m[38;5;12m (https://css-tricks.com/modular-future-web-components/)[39m
[38;5;12m- [39m[38;5;14m[1mReturn of Inspector Web: Web Components a Year Later[0m[38;5;12m (https://vimeo.com/78899868)[39m
[38;5;12m- [39m[38;5;14m[1mWorking with Custom Elements[0m[38;5;12m (https://web.dev/customelements/)[39m
[38;5;12m- [39m[38;5;14m[1mCreating Reusable Markup with The HTML Template Element[0m[38;5;12m (https://blog.teamtreehouse.com/creating-reusable-markup-with-the-html-template-element)[39m
[38;5;12m- [39m[38;5;14m[1mWorking with Shadow DOM[0m[38;5;12m (https://blog.teamtreehouse.com/working-with-shadow-dom)[39m
[38;5;12m- [39m[38;5;14m[1mBreaking Development: Web Components[0m[38;5;12m (https://www.lukew.com/ff/entry.asp?1752)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components: A Tectonic Shift for Web Development - Google I/O 2013[0m[38;5;12m (https://youtu.be/fqULJBBEVQE)[39m
[38;5;12m- [39m[38;5;14m[1mWeb Components: Getting Started[0m[38;5;12m (https://vimeo.com/68212204)[39m
[38;5;12m- [39m[38;5;14m[1mShadow DOM 101[0m[38;5;12m (https://web.dev/shadowdom/)[39m
[38;5;12m- [39m[38;5;14m[1mShadow DOM 201[0m[38;5;12m (https://web.dev/shadowdom-201/)[39m
[38;5;12m- [39m[38;5;14m[1mShadow DOM 301[0m[38;5;12m (https://web.dev/shadowdom-301/)[39m
[38;5;12m- [39m[38;5;14m[1mVisualizing shadow DOM concepts[0m[38;5;12m (https://developer.chrome.com/blog/visualizing-shadow-dom-concepts/)[39m
[38;5;12m- [39m[38;5;14m[1mWeb components and the future of web development[0m[38;5;12m (https://youtu.be/pb6DsPNdoXk)[39m
[38;5;12m- [39m[38;5;14m[1mHTML's New Template Tag[0m[38;5;12m (https://web.dev/webcomponents-template/)[39m

[38;2;255;187;0m[4m2012[0m

[38;5;12m- [39m[38;5;14m[1mThe Basics of the Shadow DOM[0m[38;5;12m (https://www.sitepoint.com/the-basics-of-the-shadow-dom/)[39m
[38;5;12m- [39m[38;5;14m[1mNotes on Web Components + ARIA[0m[38;5;12m (https://developer.paciellogroup.com/blog/2012/07/notes-on-web-components-aria/)[39m
[38;5;12m- [39m[38;5;14m[1mGoogle I/O 2012 - The Web Platform's Cutting Edge[0m[38;5;12m (https://youtu.be/2txPYQOWBtg)[39m
[38;5;12m- [39m[38;5;14m[1mIntroduction to Web Components[0m[38;5;12m (https://www.w3.org/TR/2012/WD-components-intro-20120522/)[39m

[38;2;255;187;0m[4m2011[0m

[38;5;12m- [39m[38;5;14m[1mWeb Components and Model Driven Views by Alex Russell[0m[38;5;12m (https://fronteers.nl/congres/2011/sessions/web-components-and-model-driven-views-alex-russell)[39m
[38;5;12m- [39m[38;5;14m[1mWhat the Heck is Shadow DOM?[0m[38;5;12m (https://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/)[39m

[38;2;255;187;0m[4mWho To Follow[0m


[38;5;12m  [39m
[48;5;235m[38;5;249m[49m[39m[48;5;235m[38;5;249m      [49m[39m
[48;5;235m[38;5;249m  [49m[39m[48;5;235m[38;5;249m    [49m[39m
[48;5;235m[38;5;249m    [49m[39m[48;5;235m[38;5;249m  [49m[39m
[48;5;235m[38;5;249m      [49m[39m
[48;5;235m[38;5;249m      [49m[39m
[48;5;235m[38;5;249m    [49m[39m[48;5;235m[38;5;249m  [49m[39m
[48;5;235m[38;5;249m  [49m[39m[48;5;235m[38;5;249m    [49m[39m
[48;5;235m[38;5;249m  [49m[39m[48;5;235m[38;5;249m    [49m[39m
[48;5;235m[38;5;249m    [49m[39m[48;5;235m[38;5;249m  [49m[39m
[48;5;235m[38;5;249m      [49m[39m
[48;5;235m[38;5;249m      [49m[39m
[48;5;235m[38;5;249m    [49m[39m[48;5;235m[38;5;249m  [49m[39m
[48;5;235m[38;5;249m  [49m[39m[48;5;235m[38;5;249m    [49m[39m
[48;5;235m[38;5;249m  [49m[39m[48;5;235m[38;5;249m    [49m[39m
[48;5;235m[38;5;249m    [49m[39m[48;5;235m[38;5;249m  [49m[39m
[48;5;235m[38;5;249m      [49m[39m
[48;5;235m[38;5;249m      [49m[39m
[48;5;235m[38;5;249m    [49m[39m[48;5;235m[38;5;249m  [49m[39m
[48;5;235m[38;5;249m  [49m[39m[48;5;235m[38;5;249m    [49m[39m
[48;5;235m[38;5;249m  [49m[39m[48;5;235m[38;5;249m    [49m[39m
[48;5;235m[38;5;249m    [49m[39m[48;5;235m[38;5;249m  [49m[39m
[48;5;235m[38;5;249m      [49m[39m
[48;5;235m[38;5;249m      [49m[39m
[48;5;235m[38;5;249m    [49m[39m[48;5;235m[38;5;249m  [49m[39m
[48;5;235m[38;5;249m  [49m[39m[48;5;235m[38;5;249m    [49m[39m
[48;5;235m[38;5;249m[49m[39m[48;5;235m[38;5;249m      [49m[39m
[48;5;235m[38;5;249m[49m[39m[48;5;235m[38;5;249m      [49m[39m
[48;5;235m[38;5;249m  [49m[39m[48;5;235m[38;5;249m    [49m[39m
[48;5;235m[38;5;249m    [49m[39m[48;5;235m[38;5;249m  [49m[39m
[48;5;235m[38;5;249m      [49m[39m
[48;5;235m[38;5;249m      [49m[39m
[48;5;235m[38;5;249m    [49m[39m[48;5;235m[38;5;249m  [49m[39m
[48;5;235m[38;5;249m  [49m[39m[48;5;235m[38;5;249m    [49m[39m
[48;5;235m[38;5;249m  [49m[39m[48;5;235m[38;5;249m    [49m[39m
[48;5;235m[38;5;249m    [49m[39m[48;5;235m[38;5;249m  [49m[39m
[48;5;235m[38;5;249m      [49m[39m
[48;5;235m[38;5;249m      [49m[39m
[48;5;235m[38;5;249m    [49m[39m[48;5;235m[38;5;249m  [49m[39m
[48;5;235m[38;5;249m  [49m[39m[48;5;235m[38;5;249m    [49m[39m
[48;5;235m[38;5;249m  [49m[39m[48;5;235m[38;5;249m    [49m[39m
[48;5;235m[38;5;249m    [49m[39m[48;5;235m[38;5;249m  [49m[39m
[48;5;235m[38;5;249m      [49m[39m
[48;5;235m[38;5;249m      [49m[39m
[48;5;235m[38;5;249m    [49m[39m[48;5;235m[38;5;249m  [49m[39m
[48;5;235m[38;5;249m  [49m[39m[48;5;235m[38;5;249m    [49m[39m
[48;5;235m[38;5;249m  [49m[39m[48;5;235m[38;5;249m    [49m[39m
[48;5;235m[38;5;249m    [49m[39m[48;5;235m[38;5;249m  [49m[39m
[48;5;235m[38;5;249m      [49m[39m
[48;5;235m[38;5;249m      [49m[39m
[48;5;235m[38;5;249m    [49m[39m[48;5;235m[38;5;249m  [49m[39m
[48;5;235m[38;5;249m  [49m[39m[48;5;235m[38;5;249m    [49m[39m
[48;5;235m[38;5;249m[49m[39m[48;5;235m[38;5;249m      [49m[39m
[38;5;12m  [39m


[38;2;255;187;0m[4mMaintainers[0m

[38;5;12m- Created by [39m[38;5;14m[1m@mateusortiz[0m[38;5;12m (https://github.com/mateusortiz) in 2014.[39m
[38;5;12m- Maintained by [39m[38;5;14m[1m@web-padawan[0m[38;5;12m (https://github.com/web-padawan) since 2018.[39m
