Web Components are a set of features currently being added by the W3C to the HTML and DOM specifications that allow for the creation of reusable widgets or components in web documents and web applications.
- Walk through - dev.to
- Example using Eleventy - lafuente.me
- Pollyfill - github
The intention behind them is to bring component-based software engineering to the World Wide Web. The components model allows for encapsulation and interoperability of individual HTML elements - wikipedia
# Tutorials
Here are somme simple video tutorials:
YOUTUBE mNtLjzzxGQM Building a REAL Web Component from Scratch! - Tutorial
Or if you prefer tutorials in text - thinktecture.com
YOUTUBE PCWaFLy3VUo Web Components crash course
Web Components consist of teh following main features which can be used separately or all together: - Custom Elements - new HTML elements - Shadow DOM - Encapsulated DOM - HTML Templates - contain inert chunks of DOM
# Web Component Libraries
- Material Components - github.com
- shoelace-style/shoelace: A... - github.com
- Installation - shoelace.style
- FAST - fast.design
- microsoft/fast: The adaptive... - github.com
- Charts example - vaadin.com
- Salesforce - salesforce.com
- https://vaadin.com/components
# Examples: markdown
- Juicy markdown editor - webcomponents.org
- StartPolymer/s-markdown - webcomponents.org
- Polymer marked-element - webcomponents.org
# Status and reviews
- There’s No Need To Hate... - itnext.io
- Going Buildless - DEV... - dev.to
- Apple Cements the Unlikely... - hackernoon.com
- The failed promise of Web... - verou.me
- Home ·... - github.com
- A Bit on Web Component... - css-tricks.com
- What happened to web... - logrocket.com
- Why Web Components Now?. Why... - medium.com
- lit/lit: Lit is a simple... - github.com
# Tools
- Lit - lit.dev
- Introducing JSX – React - reactjs.org
- Storybook: UI component... - js.org
- Stencil for Design Systems -... - stenciljs.com
- ionic-team/stencil: A Web... - github.com
# See also