Web Components

preview_player
Показать описание
Web Components are a polarizing feature that seem simultaneously old news and not quite ready for production yet. But we’ve been making things with Web Components, and finding some areas where they really work well. Join us to hear more about how we’re using them, what they work well for, and why we’re excited about them.

- When did Web Components “click”
- How to incorporate progressive enhancement
- Future Web Components projects
- What is still missing from Web Components?
- Thoughts on lit

Links and Demos:
Slide-deck

Ground control

is-land

fundraising-status

An Attempted Taxonomy of Web Components

Progressive Enhancement Recipes using Eleventy WebC Image Comparison Components -

Zach Leatherman

I Need Your Help to Make 11ty Fully Independent and Sustainable in 2024

Eleventy

  1. Winging It
  2. WebC
  3. Web Components
  4. Custom Elements
  5. Javascript
Рекомендации по теме
Learn Web Components 0:24:21

Learn Web Components In 25 Minutes

Web Components Crash 0:28:54

Web Components Crash Course

What Are Web 0:06:39

What Are Web Components?

The Story of 0:06:42

The Story of Web Components

21 Awesome Web 0:08:31

21 Awesome Web Features you’re not using yet

WebComponents Will Outlive 0:28:47

WebComponents Will Outlive Your JavaScript Framework | Prime Reacts

What are Web 0:04:51

What are Web Components (and why would you use them)?

How to build 0:09:11

How to build your first Web Component

Lightning Platform Workspace 0:44:01

Lightning Platform Workspace APIs in LWC

Introduction to Building 0:13:02

Introduction to Building Custom Web Components

Shoelace - An 0:19:47

Shoelace - An Awesome Web Component Library

Intro to Web 0:33:31

Intro to Web Components - Full Walkthrough

Creating Web Components 1:33:59

Creating Web Components - With Special Guest Dave Rupert!

Can you build 0:30:16

Can you build a web app with vanilla Web Components in 2024?!?

The Good, The 0:23:31

The Good, The Bad, and The Web Components - Zach Leatherman | JSHeroes 2023

What's the Difference 0:07:07

What's the Difference Between Web Components and Iframes?

Lit 3.0 Explained 0:05:45

Lit 3.0 Explained

A Complete Introduction 0:12:06

A Complete Introduction to Web Components

Building a Design 0:29:36

Building a Design System Using Standard Web Components

Are web components 0:09:30

Are web components dead or just getting started?

What Is Lit? 0:06:24

What Is Lit? - A Web Component Based Framework

Make Web Components 0:08:36

Make Web Components great with Lit

How to Create 0:20:40

How to Create a Styled Table with Web Components — JavaScript Tutorial

Building a REAL 0:35:51

Building a REAL Web Component from Scratch! - Tutorial

Комментарии
Автор

Miriam and Zach are going to build a W3C Web Annotation Web Component; that's what I heard — I'm definitely not misconstruing what has been said here. All we need to do is find unlimited resources.

Great conversation. I like the idea of a web component taxonomy as well as differentiating between standalone custom elements — meant to be available to every website — and bundles of custom elements with shared dependencies coming from design systems — meant to be used together.

tobiasfedder
Автор

If I understand it correctly, to use a custom element (say web component) that I created, doesn't the browser have to download extra JS code and register it using DOM API (that is JS, again)? How is this better when it comes to loading performance than using a React component?

zettadam