- https://web.dev/articles/web-components
- https://developer.mozilla.org/en-US/docs/Web/API/Web_Components
- https://github.com/WebComponentsGuide/webcomponents.guide
- https://github.com/newbornfrontender/udemy-web-components-and-stencil
- https://www.newline.co/courses/fullstack-web-components + https://github.com/readymade-ui/fullstack-web-components + https://www.youtube.com/watch?v=VEohjUkyFGU
- https://bpbonline.com/products/exploring-web-components + https://github.com/bpbpublications/Exploring-Web-Components
- https://github.com/web-padawan/webcomponents.today
- https://github.com/web-padawan/awesome-web-components
- https://www.manning.com/books/back-to-simple-css
- https://leanpub.com/web-component-essentials + https://webcomponent.dev + https://www.youtube.com/playlist?list=PL5na4Y3USpjEnptCE1nvq73Q8AwhSODz2 + https://coryrylan.gumroad.com/l/web-component-essentials + https://coryrylan.gumroad.com/l/web-component-essentials-book + https://github.com/coryrylan/forms-on-the-modern-web + https://coryrylan.com/blog/high-performance-html-tables-with-lit-and-css-contain
- https://www.manning.com/books/web-components-in-action + https://github.com/bengfarrell/webcomponentsinaction + https://www.youtube.com/@webcomponentsinspace/playlists?view=1&sort=lad&flow=grid + https://dev.to/bengfarrell/recordable-canvas-web-component-3nm7 + https://github.com/orgs/Web-Components-in-Space/repositories?type=all
- https://github.com/webcomponents/custom-elements-everywhere + https://www.zachleat.com/web/good-bad-web-components
- https://github.com/Matsuuu/custom-elements-language-server
- https://github.com/orgs/24webcomponents/repositories?type=all + https://www.youtube.com/playlist?list=PLJC1CIi0zsoqmxMHeUYxudg2QQUiu4JOh
- https://github.com/Matsuuu/web-component-devtools
- https://knowler.dev/blog/declarative-custom-elements-should-take-inspiration-from-css
- https://knowler.dev/blog/a-mental-model-for-styling-the-shadow-dom
- https://github.com/knowler/break-on-element
- https://github.com/knowler/log-form-element
- https://github.com/open-wc/locator
- https://github.com/node-projects/web-component-designer
- https://github.com/github/relative-time-element
- https://github.com/google/model-viewer
- https://github.com/web-padawan/vanilla-colorful
- https://github.com/GoogleChromeLabs/dark-mode-toggle
- https://github.com/arnog/mathlive
- https://github.com/nolanlawson/emoji-picker-element
- https://github.com/jhildenbiddle/css-vars-ponyfill
- https://github.com/github/custom-element-boilerplate
- https://github.com/googlemaps/extended-component-library
- https://bluespire.com/p/web-component-engineering + https://eisenbergeffect.medium.com/announcing-the-web-component-engineering-course-presale-3e2169183859 + Web Test Runner for unit tests and Playwright for e2e tests
- https://github.com/WickyNilliams/cally
- https://github.com/andreasbm/lit-translate
- https://www.npmjs.com/package/wc-storybook-helpers
- https://www.npmjs.com/package/custom-elements-manifest-deprecator
- https://github.com/toeverything/blocksuite
- https://fullystacked.net/sharing-styles-between-shadow-dom
- Creating and importing styles with constructable stylesheets and CSS module scripts
- https://dev.to/stuffbreaker/dark-mode-in-web-components-is-about-to-get-awesome-4i14
- https://react.dev/blog/2024/04/25/react-19#whats-new-in-react-19 + webcomponents/custom-elements-everywhere#2351
- https://scottjehl.com/posts/polyfilling-with-wcs/
- https://thedesignsystem.guide/interview-ariel-salminen
- https://github.com/daviddarnes/link-peek
- https://sh.reddit.com + https://twitter.com/addyosmani/status/1677790748719325185
- https://github.com/mdn/web-components-examples
- two new APIs that allow the declarative shadow DOM to be used from JavaScript
- https://github.com/shoelace-style/shoelace, fastest approach using web components
- Eleventy's newest plugin enables developers to write single file components to include web components, templates, and shadow DOM in our sites. Zach Leatherman shows us how to use WebC
- https://github.com/hawkticehurst/stellar + https://fosstodon.org/@hawkticehurst/111507538341466399 + https://hawkticehurst.com/writing/12-days-of-web-components/day-6/
- Minimalistic Web Components with SSR Support
- https://eduardmoldovan.com/not-posts/detailed-example-of-web-components-usage + https://naildrivin5.com/blog/2024/01/24/web-components-in-earnest.html
- https://www.youtube.com/playlist?list=PL37ZVnwpeshFFbc7hknsfN15lelTPv1sW + https://www.youtube.com/playlist?list=PLG-wJSjG-JpkGsqLGYXbmjl7btpi3ZiWf
- https://lamplightdev.com/blog/2024/01/10/streaming-html-out-of-order-without-javascript, use of Declarative Shadow DOM
- https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
- https://github.com/thepassle/swtl + https://github.com/thepassle/blog
- A collection of generic web components with a focus on accessibility, and ease of use
- https://blog.westbrookjohnson.com/patterns/adopted-style-sheets/
- https://github.com/node-projects/web-component-designer
- WebComponents.dev is an component-oriented online IDE
- Introduction:
- Refreshing Next Generation JavaScript (Optional)
- Understanding the basics:
-
What are web components?
Feature Description Custom HTML Element Register your own HTML Tags Shadow DOM Manage a separate DOM node tree for your HTML elements (including scoped CSS styles) Templates & Slots Write HTML templates that you can add to your HTML elements HTML Imports Although this feature was initially part of the Web Components spec, it has been deprecated in favor of ES Modules (JavaScript importstatements) -
Understanding the custom element lifecycle
-
Using the Shadow DOM
-