Web Components

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 - Wired Elements - Shoelace - github.com - Material Components - 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 - Markdown Web Component

# 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 - Cards and Grids - Web Components in Vue.js

# 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

# Some Frameworks

- Showdownjs - A markdown to... - showdownjs.com - Showdown Live Editor - showdownjs.com - Customize a Circular Human... - plandisc.com

# See also