Skip to content

Web Components

September 29, 2023
August 23, 2022

Web Components Resources
open-wc

Custom Elements Everywhere Making sure frameworks and custom elements can be BFFs

AMP - a web component framework to easily create user-first web experiences - amp.dev

Regarding the broken promise of Web Components
The broken promise of Web Components | A Place Where Even Mammoths Fly
The Story of Web Components - YouTube

Building Components | Web Fundamentals | Google Developers
What are WebComponents and why are they important?
An Introduction to Web Components | CSS-Tricks
Making Web Components for Different Contexts | CSS-Tricks
Introduction to Web Components
Home · basic-web-components/components-dev Wiki

Web Components update: more time to upgrade to v1 APIs v0 is removed from Chrome v80

Shadow DOM v1: Self-Contained Web Components | Web | Google Developers
The Hidden Case of the Shadow DOM | by Daniel Martin | Bits and Pieces

Web Components in 2019: Part 1 - codeburst
Web Components in 2019: Part 2 - codeburst
Web Components in 2019: Part 3 - codeburst
Web Components in 2019: Part 4 - codeburst

Custom Elements: defining new elements in HTML - HTML5 Rocks
Sharing Polymer Components: Part 1 - Tuts+ Code Tutorial
Sharing Polymer Components: Part 2 - Tuts+ Code Tutorial
How to Turn React Component into Native Web Component

Basic Web Components · GitHub
Bosonic Web Component
X-Tag - Web Components Custom Element Polylib

hybrids - a framework for the web with unique declarative and functional architecture

Why I don't use web components - DEV Community
Are Web Components Dead?. Recently, I published an article with a… | by Marius Bongarts | Jun, 2022 | Medium

Enhance

Enhance docs - Quick start
Enhance org
enhance-dev/enhance-starter-project: file based routing metaframework for blazing fast custom elements

Stencil

By Ionic team, build standard Web Component

Stencil A Compiler for Web Components
ionic-team/stencil: A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.

A look at Stencil.js - Component Kitchen
Stencil - Getting Started - YouTube
Stencil: a built-time approach to the web by Manu Martinez-Almeida | JSConf EU 2019 - YouTube

minze

JS framework for native web components | Minze
n6ai/minze: Dead-simple JS framework for native web components.

Minze, a Minimalistic JS Library for Creating Web Components
Introduction to Minze - LogRocket Blog

Polymer

use Lit

Welcome - Polymer
PolymerElements
Concatenating Web Components with Vulcanize - Polymer
Using Polymer to Create Web Components - Tuts+ Code Tutorial

Lit

lit-html + LitElement = Lit 2.0, could have been "Polymer 4"

Lit

lit-html
Introduction –LitElement

LitElement used by Polymer
Polymer/lit-element: A simple base class for creating fast, lightweight web components

Getting Started with a New Lit Project in 2023 | Bits and Pieces
You can use Lit everywhere - YouTube

Component repos

WebComponents.org
google-web-components

9 Web Components UI Libraries You Should Know in 2019

Lightning Web Components foundation - OSS Documentation

PolymerLabs
PolymerElements
Component Kitchen - Web Component Experts

Material Web Components Catalog
material-components/material-components-web-components: Material Web Components - Material Design implemented as Web Components

PolymerElements/marked-element - webcomponents.org