Listen Top Shows Blog

5: Web Components, front and center

5: Web Components, front and center

Update: 2021-05-18

Share

Description

In this episode we focus on web components. Poul gives a short intro to what they are and brings up some of the benefits of using web components, and also some of the disadvantages. We talk about the shadowDOM, encapsulation, `::part` , slots, builders/compilers and framework integrations. Will web components replace JS frameworks? How do you go about styling a web component?

🔗 LINKS

Using shadowDOM

Explainer: CSS Shadow ::part and ::theme

Adele - design systems repository

Inheritable styles

StencilJS Store

Lion web components

@deckdeckgo/lazy-img - image lazy load web component

Comments

Top Podcasts

The Best New Comedy Podcast Right Now – June 2024 The Best News Podcast Right Now – June 2024 The Best New Business Podcast Right Now – June 2024 The Best New Sports Podcast Right Now – June 2024 The Best New True Crime Podcast Right Now – June 2024 The Best New Joe Rogan Experience Podcast Right Now – June 20 The Best New Dan Bongino Show Podcast Right Now – June 20 The Best New Mark Levin Podcast – June 2024

In Channel

21: Web apps in safari, native CSS nesting and starting out with Nuxt

21: Web apps in safari, native CSS nesting and starting out with Nuxt

2023-06-2201:03:55

20: Exciting WebKit news and the AI uprising

20: Exciting WebKit news and the AI uprising

2023-04-2801:12:12

19: Open source & communities with Lars Brink

19: Open source & communities with Lars Brink

2023-02-0901:13:08

18: PostCSS vs SASS

18: PostCSS vs SASS

2022-12-3056:31

17: Modernising the Umbraco Backoffice with Web Components and Lit - with Filip Bech

17: Modernising the Umbraco Backoffice with Web Components and Lit - with Filip Bech

2022-11-2501:01:19

16: UX and frontend collaboration with Thomas Hjortsberg

16: UX and frontend collaboration with Thomas Hjortsberg

2022-10-1301:25:15

15: Fig, Bun, dialog-element, :readonly gotchas and bookmarking strategies 🔖

15: Fig, Bun, dialog-element, :readonly gotchas and bookmarking strategies 🔖

2022-09-2057:27

14: Dogs, Safari, Vue/Nuxt, Histoire and Angular 14

14: Dogs, Safari, Vue/Nuxt, Histoire and Angular 14

2022-08-1555:42

13: Pizza, new Safari releases, dialog-element, :focus-visible, optional chaining and polyfills

13: Pizza, new Safari releases, dialog-element, :focus-visible, optional chaining and polyfills

2022-06-2949:23

12: Being a consultant

12: Being a consultant

2022-05-1946:45

11: Technology throwbacks - A tribute to AngularJS and jQuery

11: Technology throwbacks - A tribute to AngularJS and jQuery

2022-03-0901:14:15

10: 2021 reflections

10: 2021 reflections

2022-01-1855:41

9: Mikkels thoughts on using Tailwind and Angular

9: Mikkels thoughts on using Tailwind and Angular

2021-12-1201:09:53

8: Testing from a beginners standpoint

8: Testing from a beginners standpoint

2021-10-3001:00:25

7: The fall of IE

7: The fall of IE

2021-09-2301:03:24

6: Modern CSS and JS we're excited about 🤩

6: Modern CSS and JS we're excited about 🤩

2021-06-1853:56

5: Web Components, front and center

5: Web Components, front and center

2021-05-1854:50

4: Component libraries and design systems

4: Component libraries and design systems

2021-03-3150:33

3: Utility CSS and Tailwind

3: Utility CSS and Tailwind

2021-02-2454:08

2: Productivity, Working from home, Code Editor tips and the Best debugging tool

2: Productivity, Working from home, Code Editor tips and the Best debugging tool

2021-01-3043:39

00:00

00:00

x

5: Web Components, front and center

5: Web Components, front and center

Poul Hansen, Kevin Andries and Mikkel Rom