HTML with Superpowers: An Introduction to Web Components • Hacker News Board

Re: HTML with Superpowers: An Introduction to Web Components

#11

Post by nileshtrivedi » Wed, Jan 11, 2023, 3:02 AM UTC

claytongulick wrote: post #7

lordgroff wrote: post #3

It obviously hasn't happened, but I hope that web components eventually make serious inroads. A UI library for React, Vue, Svelte, Solid, whatever... Imagine being able to have a component library that works with any of them (or none of them). Since I really like mithril and there's one UI library, I've been playing with Shoelace and Crayons and they're pretty nice to work with, but I remain a bit puzzled why there's…

Stencil and consequently Ionic are all Web Component based. Svelte fully supports compiling to Web Components with 100% test coverage. Vue fully supports Web Components as well, the only issue I've run into there is with CustomEvent.detail not being copied into the Vue event payload properly. Web Components are widely used on the web, just under the covers sometimes.

VueJS actually fails some advanced tests for WebComponents: https://custom-elements-everywhere.com/

So, VueJS docs are actually incorrect when they say it scores 100%. The actual score is 91%.

I had reported this 8 months ago.

Re: HTML with Superpowers: An Introduction to Web Components

#12

Post by nileshtrivedi » Wed, Jan 11, 2023, 3:12 AM UTC

lordgroff wrote: post #3

It obviously hasn't happened, but I hope that web components eventually make serious inroads. A UI library for React, Vue, Svelte, Solid, whatever... Imagine being able to have a component library that works with any of them (or none of them). Since I really like mithril and there's one UI library, I've been playing with Shoelace and Crayons and they're pretty nice to work with, but I remain a bit puzzled why there's…

Microsoft has a library called FluentUI: https://learn.microsoft.com/en-us/fluent-ui/web-components/

Re: HTML with Superpowers: An Introduction to Web Components

#13

Post by logankeenan » Wed, Jan 11, 2023, 3:23 AM UTC

I evaluated web components a few months ago. Everything was great except event propagation. Let’s say I have a component which is a DIV that wraps a label and an input. How can a consumer listen to the onchange event of the component which should map to the inputs onchange event. I could never come up with a holistic solution that would work for all components. It’d require a lot manual work mapping the input event to a new event that is triggered on the web component. I’d be interested if anyone found a better pattern

Re: HTML with Superpowers: An Introduction to Web Components

#14

Post by bobthepanda » Wed, Jan 11, 2023, 3:24 AM UTC

chiefalchemist wrote: post #6

hyperhello wrote: post #2

I’m curious how often you encounter web designers with enough experience with CSS to make web components worthwhile but not enough “JavaScript know how” not to.

You'll likely still need someone with sufficient JS skills. The key will be for the designers to think in such terms (i.e., components). In nearly every (marketing) agency I've worked at, the designers envisioned themselves as creatives. "Boundaries? Not us. We live outside the box..." Trying to get them to understand you can have the same underlying structure and just bend it with CSS wasn't something they've wanted…

Marketing is one portion of web design.

At a lot of BigCos, the designs are supposed to be standard outside of the once in a generation refresh. One of the advantages of a big brand is a consistent, known quantity, and so things have to be harmonious; Starbucks is not out there making crazy new cups for every new drink they sell, every McDonald's location looks more or less the same, etc.

A lot of the variation we've seen in the early web was because web was something that a lot of people were outsourcing, but these days web is more integral, theoretically.

Re: HTML with Superpowers: An Introduction to Web Components

#15

Post by colecut » Wed, Jan 11, 2023, 3:32 AM UTC

Why is there no standard/widely used vanilla-js based webcomponent for creating a table with filtering+sorting+pagination? It's such a common and useful thing.

Re: HTML with Superpowers: An Introduction to Web Components

#16

Post by bobthepanda » Wed, Jan 11, 2023, 3:33 AM UTC

lordgroff wrote: post #9

_boffin_ wrote: post #4

I’ve been playing with webcomponents for a month or two and really love them. I do wish that IntelliJ would play nice with the formatting of them though. Question: when and or if they gain in adoption, could you see them replacing react? If not, what’s the use-cases that you believe they wouldn’t work for?

Anywhere you actually need React (and also React lite solutions like Preact or Alpine), which is essentially where your page isn't just a static page, web components by themselves don't do anything to handle the complexity of state. But what they allow you to do is to use the same component in whatever framework you pick.

Yeah, what I like about React is how declarative component writing is, and how you delegate state changes to escape hatches. Plain old HTML is supposed to be declarative but updating with vanilla JS quickly gets you into the weeds.

I tried to get into WebComponents, but the MDN tutorial has you writing a lot of `document.createElement` and `document.appendChild`, which is the sort of imperative stuff I don't like about vanilla JS DOM manipulation.

Re: HTML with Superpowers: An Introduction to Web Components

#17

Post by apatheticonion » Wed, Jan 11, 2023, 3:44 AM UTC

My biggest gripe with web components is an inability to sandbox them. That forces me to put reusable "components" within iframes for security reasons.

That said, generally speaking, web standards really suck at offering sandboxing capabilities for third party integrations.

Re: HTML with Superpowers: An Introduction to Web Components

#18

Post by [deleted] » Wed, Jan 11, 2023, 3:54 AM UTC

apatheticonion wrote: post #17

My biggest gripe with web components is an inability to sandbox them. That forces me to put reusable "components" within iframes for security reasons. That said, generally speaking, web standards really suck at offering sandboxing capabilities for third party integrations.

[deleted]

Re: HTML with Superpowers: An Introduction to Web Components

#19

Post by danielvaughn » Wed, Jan 11, 2023, 3:58 AM UTC

One of the problems with native encapsulation is that UI frameworks almost never fully satisfy the product requirements for a given application, so in some cases it’s always necessary to override either behavior or styling. If you remove that capability with a shadow DOM, you damn well better be sure that your abstraction is perfect.

Re: HTML with Superpowers: An Introduction to Web Components

#20

Post by buildingsramen » Wed, Jan 11, 2023, 4:21 AM UTC

colecut wrote: post #15

Why is there no standard/widely used vanilla-js based webcomponent for creating a table with filtering+sorting+pagination? It's such a common and useful thing.

What do you mean? There are tons of these around. Are you complaining that none of them are popular enough?