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

41–50 of 247 posts

Re: HTML Web Components

#41

Post by jmull »

goeiedaggoeie wrote: post #26
cantSpellSober wrote: post #5

> they can render before JavaScript. React components cannot do this — full stop Not a full stop; SSR means they could render before client-side JS. The example is a bit too simple to make the author's point IMO. A web component that handles changes to state would be a better comparison, and make for a better argument.

This is the main issue for me with webcomponents, they are not SSR friendly.

Consider the approach this article suggests.

You want to have the tags and content appear in the web component (not rendered by JS) which makes it easily and immediately available to crawlers.

Re: HTML Web Components

#42

Post by jtcasper »

dmix wrote: post #32
ohwellhere wrote: post #25

Earlier quoted context omitted.

I think there's a lot of value for classic server-side web applications rather than SPAs. That handles routing, state, etc. I'm personally a fan and hope that the server-based application renaissance happens as some predict.

Most people using react aren't building SPAs. Vue/React can be used the same way as jquery, which is to add enhanced UI functionality that server-side HTML views simply can't offer. The best example is a multi-select box, or a searchable select box with autocomplete (what W3 calls the combobox pattern https://www.w3.org/WAI/ARIA/apg/patterns/combobox/ ) which in jquery was usually via https://select2.org/ For example…

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.

Re: HTML Web Components

#43

Post by joestrouth1 »

sesm wrote: post #37

> > https://example.com/path/to/img.jpg " alt="..." /> > I thought the standard way to do it is: https://example.com/path/to/img.jpg " alt="..." />

That is one way to do it, provided `user-avatar` extends HTMLImageElement and not the more generic HTMLElement. Extending built-ins and using the `is` attribute is not supported in Safari however and last I checked they were firmly opposed to it.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att...

Re: HTML Web Components

#44

Post by mock-possum »

superkuh wrote: post #8

It's a nice idea and I'm glad we can expand the language to differentiate between html web components and javascript web components. That's important because the vast majority of use of web components are in the form of javascript web components. The only time I've ever seen HTML web components are on blog posts talking about how you can use web components. Never on an actual website about something besides web compo…

I’ve made a couple of big SPAs that use Lit to manage views.

I can’t link you to them here without blowing my cover, but honestly I love working with web components, and being able to do it natively rather than propped up by a mound of JavaScript feels good.

Re: HTML Web Components

#47

Post by justsomehnguy »

willsmith72 wrote: post #36

> But the unique power of web components (in the browser) is that they can render before JavaScript. React components cannot do this — full stop. Unless you... server-side render them. Then your definition of "render" needs to change

At least you can server render web comppnents.

Re: HTML Web Components

#48

Post by jjcm »

sesm wrote: post #37

> > https://example.com/path/to/img.jpg " alt="..." /> > I thought the standard way to do it is: https://example.com/path/to/img.jpg " alt="..." />

They're different things, though with an extremely simple component they might achieve a relatively similar goal. The downside of `is` is that you can only specify a single element to map to the component. An example of why you'd need to take the slotted approach is if you had something like this:

Bob Bobson

Re: HTML Web Components

#49

Post by joshstrange »

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 "replace" HTML (re: "XHTML wanted to replace HTML4, but HTML5 wanted to augment it. HTML5 won.", in the "On The Web, Augmentation Wins in the Long Run" section), they are taking HTML/CSS/JS and building on top of them. If they all used canvas to render instead I might buy that argument but they don't. They absolutely push those technologies to their breaking point but it's nothing short of amazing in my book what you can accomplish with them compared to just HTML/CSS/JS and even "web components".

I was excited when Web Components were first announced but they are incredibly lackluster with no "Batteries included" and feel like they don't really help you build web _apps_ like the frameworks do. Every alternative to the big frameworks (looking at you htmlx) feel like minor syntaxic sugar for jQuery and friends which feels like a massive step backwards and completely the wrong choice for building a web app.

Re: HTML Web Components

#50

Post by xigoi »

jtcasper wrote: post #42
dmix wrote: post #32

Earlier quoted context omitted.

Most people using react aren't building SPAs. Vue/React can be used the same way as jquery, which is to add enhanced UI functionality that server-side HTML views simply can't offer. The best example is a multi-select box, or a searchable select box with autocomplete (what W3 calls the combobox pattern https://www.w3.org/WAI/ARIA/apg/patterns/combobox/ ) which in jquery was usually via https://select2.org/ For example…

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.

with still doesen't work on Firefox Android.
Post reply on HN