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.
# 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 (double-click to edit caption)
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
- Walk through - dev.to
- Example using Eleventy - lafuente.me
- Pollyfill - github
Web Components consist of 4 main features which can be used separately or all together: - Custom Elements - new HTML elements - Shadow DOM - Encapsulated DOM - HTML Imports - importing HTML documents - 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
There are several libraries that are built on Web Components with the aim of increasing the level of abstraction when creating custom elements. Four of the familiar libraries are X-Tag , Slim.js, Polymer (Polymer (library)), and Bosonic.
Two of these, Bosonic and Polymer, provide ready-made components that are free to use. These components can be used interchangeably as they are all built on open web technologies -
vaadin.com
# 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
# Links
- webcomponents.org - webcomponents.org
- Community - webcomponents.org
- Introduction -... - webcomponents.org
- webcomponents.org - webcomponents.org
- PolymerElements/marked-... - webcomponents.org
- StartPolymer/s-markdown -... - webcomponents.org
- Juicy/juicy-markdown-editor... - webcomponents.org
- Dealing with files - Learn... - mozilla.org
- How to Modularize HTML Using... - zellwk.com
- Polymer (library) - Wikipedia - wikipedia.org
- Welcome - Polymer Project - polymer-project.org
- X-Tag ★ Web Components - github.io
- Web Components | MDN - mozilla.org
# See also
- Features - Browser Support - Libraries