Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

HTML Web Components

blog.jim-nielsen.com

Post reply on HN
Print view View original

81–90 of 247 posts

Re: HTML Web Components

#81

Post by TheCleric »

codingdave wrote: post #66

I'm not sure I buy the "React is replacement, not augmentation" argument. At the end of the day/render, React still renders HTML elements... with javascript event handlers. Wrapping an ' ' in a React component doesn't mean I've taken away any functionality of 'img'. I just add to it -- augmentation. Maybe the author has worked in different React codebases than I have, but in my experience, we use built-in browser fun…

I could be wrong, but it seems like the article is saying that the core difference would be this:

React (rendering in the browser, not server side): Page Load -> Component Load

vs.

Web Component Page Load -> Default Render -> Component Load

So if someone has JS disabled they would still see SOMETHING for the web component vs. nothing in React. And with JS they could get to some further render state.

Re: HTML Web Components

#83

Post by mortallywounded »

notatoad wrote: post #75
mortallywounded wrote: post #51

Earlier quoted context omitted.

Sorta-- that means you render it at least twice. 1. You convert the JavaScript/JSX into HTML on the server and send it down (along with multiple blobs of JSON/code to re-hydrate). 2. The browser parses all the HTML and added JSON/code. 3. The browser then re-hydrates the page via JavaScript loading all of the JSON/code and computing everything (rendering it again).

>The browser then re-hydrates the page via JavaScript loading all of the JSON/code and computing everything (rendering it again). isn't this exactly what's going on under the hood with web components? if you send an html page including , the browser is going to draw the tag and treat the tag as a no-op because it doesn't know what to do with that. then your javascript kicks in and transforms the tag into whatever the…

Yeah-- but a single component is a much smaller degree of JS than an entire React application.

Re: HTML Web Components

#84

Post by boredtofears »

joshstrange wrote: post #49

I was interested to see this article explain what `user-avatar` actually did/provided but it never did. Does it just have styles in it? If so why wouldn't I just use css classes? I also think having a `user-avatar` take a `src` prop makes way more sense than having to add an `img` tag inside it everywhere I use it. In that case what am I saving? What is reusable? Vue/React/Angular don't seem like they are trying to "…

I think the Eric Meyer post demonstrates the intention of that much better: https://meyerweb.com/eric/thoughts/2023/11/01/blinded-by-the...

The benefit boils down to progressive enhancement: because an img tag has built in behavior you simply rely on default rendering behavior and provide "augmentation" as needed via your web component.

Re: HTML Web Components

#85

Post by couchand »

dmix wrote: post #52
jtcasper wrote: post #42

Earlier quoted context omitted.

The element with a text input field is an HTML native typeahead, which works great with SSR or you could wire up the datalist client side with an XHR creating the datalist. You maybe don't get full control over the rendering style of it, but it's a still significantly more usable than the Angular Material autocompletes.

That's an interesting one I wasn't familiar with. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/da... It's a shame clicking on it doesn't show the options like a select box though.

Click again I guess?

> Recommended values in types text, search, url, tel, email and number, are displayed in a drop-down menu when user clicks or double-clicks on the control.

Re: HTML Web Components

#86

Post by butz »

Why even build a component, when it is an image which could have styles applied using a class? I understand web components appeal when building complex elements, but this probably just slows down website, especially when element is repeated hundreds of times on page.

Re: HTML Web Components

#87

Post by yieldcrv »

when is ‘composability’ getting added to the dictionary?

it is a pretty intuitive term - interoperable building blocks in areas that suffered from fragmentation - but isn't really part of the lexicon by the lexicon gods

Re: HTML Web Components

#89

Post by sylware »

joshstrange wrote: post #49

I was interested to see this article explain what `user-avatar` actually did/provided but it never did. Does it just have styles in it? If so why wouldn't I just use css classes? I also think having a `user-avatar` take a `src` prop makes way more sense than having to add an `img` tag inside it everywhere I use it. In that case what am I saving? What is reusable? Vue/React/Angular don't seem like they are trying to "…

The core of the web only need basic HTML with closing tags (and properly shaped singleton element/tags) with the basic grammar (from the specs), utf8 encoded, no script.

It is enough for a bazillion of online services, that without requiring a beyond insanely complex and massive web engine from Big Tech. basic HTML forms can do wonders.

Of course, you can have a full blown Big Tech web app, but don't forget to have a interop portal with noscript/basic (x)html browsers to avoid, at least for critical online services, Big Tech lock-in and unreasonable exit cost.

That said, it may be a good idea to be able to drive the display or not of rules with the default styling (css or hardcoded) from the 2D semantic HTML document attributes (I should check the hardcoded style of links and lynx for rules).

(I am not talking about the abomination of the "semantic" web we had a decade ago)

Re: HTML Web Components

#90

Post by cdcarter »

dmix wrote: post #52
jtcasper wrote: post #42

Earlier quoted context omitted.

The element with a text input field is an HTML native typeahead, which works great with SSR or you could wire up the datalist client side with an XHR creating the datalist. You maybe don't get full control over the rendering style of it, but it's a still significantly more usable than the Angular Material autocompletes.

That's an interesting one I wasn't familiar with. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/da... It's a shame clicking on it doesn't show the options like a select box though.

Clicking it shows the options for me (Chrome 119).
Post reply on HN