Sign in Subscribe
编程

Web Components Resources

Brandon Zhang

• 2 min read

For New Comers

  • MDN: https://developer.mozilla.org/en-US/docs/Web/Web_Components
  • JAVASCRIPT.INFO: https://javascript.info/web-components
  • web.dev: https://web.dev/web-components/
  • https://github.com/knowler/custom-element-lifecycle-element

Standalone Web Components

David Darnes

  • https://darn.es/is-playing-web-component/

Zach Leatherman

  • https://www.zachleat.com/web/snow-fall/
  • https://github.com/zachleat/browser-window

Web Components Projects

  • https://webcomponent.io/

Testing Web Components

  • https://lea.codes/posts/2023-12-18-testing-web-components/

Articles

Smashing Magazine

  • https://www.smashingmagazine.com/2014/03/introduction-to-custom-elements/
  • https://www.smashingmagazine.com/2016/12/styling-web-components-using-a-shared-style-sheet/
  • https://www.smashingmagazine.com/2022/04/cta-modal-build-web-component/

Lea Verou

  • https://projects.verou.me/nudeforms/button-group/

Camilo Reyes

  • https://www.sitepoint.com/frameworkless-web-components-introduction/
  • https://www.sitepoint.com/build-frameworkless-web-app-modern-javascript-web-components/

Chris Haynes

  • https://lamplightdev.com/blog/tag/web%20components/
  • https://waferlib.netlify.app/

Francesco Strazzullo

  • https://github.com/francesco-strazzullo/frameworkless-front-end-development

Ayush Gupta

  • Part 1: https://ayushgp.xyz/html-web-components-using-vanilla-js/
  • Part 2: https://ayushgp.xyz/html-web-components-using-vanilla-js-part-2/
  • Part 3: https://ayushgp.xyz/html-web-components-using-vanilla-js-part-3/

From Mastodon

Others

  • https://krasimirtsonev.com/blog/article/A-modern-JavaScript-router-in-100-lines-history-api-pushState-hash-url
  • https://blog.jeremylikness.com/blog/build-a-spa-site-with-vanillajs/
  • Part 1: https://jack.ofspades.com/developing-small-javascript-components-without-frameworks/
  • Part 2: https://jack.ofspades.com/frameworkless-javascript-part-2-templates-and-rendering/
  • Part 3: https://jack.ofspades.com/frameworkless-javascript-part-3-one-way-data-binding/

Web Components Router

  • Vaadin Router: https://github.com/vaadin/router
  • https://github.com/markcellus/router-component
  • https://github.com/andreasbm/router-slot
  • https://github.com/colscott/a-wc-router
  • https://github.com/Simplr/simplr-router
  • https://github.com/dedego/web-component-router
  • https://github.com/aaronshaf/html-router
  • https://github.com/ryansolid/webcomponent-router

Frameworkless Movement

  • https://github.com/frameworkless-movement/awesome-frameworkless#javascript

New Things

  • CSS Module Scripts (https://web.dev/css-module-scripts/)

Web Components Library

  • Shoelace: https://github.com/shoelace-style/shoelace
  • Spectrum Web Components: https://github.com/adobe/spectrum-web-components
  • Nord Web Components: https://nordhealth.design/web-components/
  • Lion: https://lion-web.netlify.app/components/
  • UI5 Web Components: https://github.com/SAP/ui5-webcomponents
  • Vaadin Web Components: https://github.com/vaadin/web-components