JSHeroes 2023 (The Good, The Bad, and The Web Components)

Watch in 24 minutes May 18, 2023

Video

Watch on YouTube: The Good, The Bad, and The Web Components - Zach Leatherman | JSHeroes 2023

This talk is available as a blog post: The Good, the Bad, and the Web Components (if you prefer to read, like me).

Watch on YouTube: The Good, The Bad, and The Web Components - Zach Leatherman | JSHeroes 2023

Tags: Speaking Web Components Event in 🇷🇴 Romania

Zach Leatherman is a builder for the web at Font Awesome and the creator of Build Awesome (née Eleventy/11ty), an award-winning open source website generator. He measures website performance with speedlify and at one point became too fixated on web fonts. He has given 86 talks in nine different countries at events like Beyond Tellerrand, State of the Browser, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Learn more about Zach »

23 Comments in 12 Threads

@carlosverdes
16 Apr 2025

I honestly don't want to use web components in the server, just want to enhance user experience on the browser and simplify what is sent from the server. To generate content on the server I would use another option like htmx.
@thekeyexchange
16 Jan 2025

I couldn't stop noticing how much Zach sounds similarly to Nick Swardson...
@dovh49
03 Oct 2024

What I'd really like is: <noscript><p>Button will not work as scripting is not working.</p></noscript> <button traits="my-counter">1</button> The traits attribute could have multiple values space delimited. This way I don't have to junk up all my HTML with tags. Just add an attribute. Nice and simple. I know there is the `is` attribute. But it only allows for one trait and Safari says they refuse to implement it. But normally I only use one trait so, I suppose I could just polyfill it for now... But I think a lot of library creators don't use it since Safari refuses to implement it.
@antonio_carvalho
16 Apr 2024

Great talk, a pleasure to watch, thank you!

Show 8 older threads

@emberchord
26 Jan 2024

common yellow tint
@andypsolomon
23 Jan 2024

this guy is hilarious, so much that i didn't learn anything i was just laughing the whole time. gonna have to watch again.
1. @pookiepats
  01 Nov 2024
  
  i find the endless sarcasm so annoying, different strokes. 😊
@nathanmiddleton1478
21 Nov 2023

I'm no expert, just a foggy from the 90s. How is it "server rendered"? The server doesn't layout the page, the server doesn't calculate the DOM. All the server is doing is caching and pushing data. Rendering of everything else is on the client, yes?
Show 6 replies
1. @benighted2
  21 Nov 2023
  
  The term/phrase has come to mean declaring/generating markup dynamically on the web server vs the client.
2. @hellerbarde
  30 Nov 2023
  
  You can think of it like "rendering" a template. You're right that none of the layouting-related decisions are done on the server's side.
3. @patricknelson
  29 Mar 2024
  
  To add to that: With the “server rendered” declarative shadow DOM, the component will take on the appearance defined in that HTML/CSS even if JavaScript isn’t even enabled. This is in contrast with the traditionally “client rendered” version where JS would still be required to execute and set the contents of the shadow DOM.
4. @antonio_carvalho
  16 Apr 2024
  
  It's rendering the *html code* in the server, instead of using javascript locally. It's not about the visual rendering that the browser does.
5. @thearturotoledo
  19 Oct 2024
  
  I agree. Kids use wrong terminology to describe things. It's like software development wokeness.
6. @pookiepats
  01 Nov 2024
  
  no, not exclusively; ie done right it is very ergonomic (hono), you do actually render on server and push html over the wire. that's not always true of all libs claiming as much though so it is annoying. just use hono (zero dependency) if you must use js server side
@CodecrafterArtemis
17 Nov 2023

I'm a bit miffed that, when they talk about "server-side" they specifically talk about NodeJS-exclusive solutions and static site generators instead of things that can integrate with backend frameworks (Rails, Flask, Django, etc).
1. @patricknelson
  29 Mar 2024
  
  With you on this. I run mostly PHP on the server side, but implement web components + Svelte on the client side. What’s more is that there are other JS runtimes and environment types (e.g. Cloudflare workers or WinterJS/WinterCG). Interestingly, runtimes _like_ those which are WinterCG compatible offer opportunities for SSR of JS-bound things (like web components) without necessarily having to have JS as your “back-end”. In this case, there are 3 total layers now (a traditional back-end, traditional front-end and a middleware layer of some sort to perform component SSR). It’s something I’m working on myself in my free time (sorta rare, but still an ongoing thing). 😅
@sambines3463
12 Nov 2023

I am moving away from a lot of these frameworks to web components. I got sick of the constant bullshit with vue/angular/react specific crap.
1. @patricknelson
  29 Mar 2024
  
  Web components, while not quite as elegant in some ways as modern frameworks, they have one *huge* thing going for them: They’re a standard. That means that they’re here to stay. They work great to sorta bridge the gap as well, in many different ways, including between heterogeneous back-ends (like Ruby, PHP, Python, etc) and even between JS frameworks which support rendering custom elements.
@heybran_
11 Jul 2023

:host-context() selector is depreciated I believe, there is a github issue for that.
1. @zachleat
  12 Jul 2023
  
  Do you have a link?
Comment Removed
Comment Removed
1. Comment Removed