Comment by russellbeattie | Hacker News Reader

Comment by russellbeattie | Hacker News Reader

Parent Full thread

I just started using Web Components, and in my opinion, their future is definitely very bright. Now that HTML imports have been squashed, they're basically just standard JavaScript objects imported as modules, as they should be. Before, you created a class/object that had a property like foo.el which was the element it was associated with, but the link was tenuous, and required a bunch of code to keep things in sync, and various component styles could easily clash. Extending native elements and the Shadow DOM is a great way to contain everything. Wiring them up to something like Redux or MobX is trivial.

The only real missing piece is the concept of props over attributes. If I want to pass an array of ids to a sub-component declaratively, there's not really an easy way to do it. Hopefully there will be some consensus about this soon. The best thing is that this is all part of modern browsers without libraries, or even precompilation. Not every web app needs massive libraries, so having web components as a built-in, light-weight component system is fantastic.

> The only real missing piece is the concept of props over attributes

Plenty of HTML templating languages allow for setting properties declaratively. Polymer, lit-html, Vue, Angular, all do.

For instance, in lit-extended (an extension of core lit-html), properties are set by default, attributes have a '$' suffix, and event handlers have an 'on-' prefix:

    html`
      <my-element
        aProp=${foo}
        an-attribute$="${}"
        on-click=${clickHandler}>
      </my-element>
    `;

You're right, but because it's not part of the standard, there's various implementations. This is what I meant about consensus.

The standard side of things is just that DOM Elements have a JS interface with properties. That there are many ways to set properties on JS objects, with template systems being just one of many.

I'm not sure that HTML itself will get a standard way to set properties, even with the Template Instantiation proposal. Encoding the intent to set a property is hard given that all valid attribute names are already valid attribute names, and could have current semantics. Adding new support for currently invalid attribute names sounds like a very difficult thing to do.

This can stay at the level of opinionated libraries. You learn how to use that library and it's method for setting properties, and you don't have to worry about other components choices for templating.

Well, it seems like a basic problem that everyone runs into pretty quickly when they start putting components together. Think of an Android RecyclerView created as a web component which lets you scroll through a large dataset. The parent component needs to be able to pass a reference to an array of content. This can be done programmatically easily enough, but not in a declarative way.

(BTW, lit-html is really well done. I look forward to seeing its progress - LitElement could really be the underpinning to a standards-based competitor to React, which is a very welcome thing in my opinion.)

> If I want to pass an array of ids to a sub-component declaratively, there's not really an easy way to do it.

This seems like a framework layer feature and not something that should be baked into the standard. I don't think web components are supposed to act like a framework and optimize a particular workflow or programming style.

I think the way snabbdom implements props just assigns Javascript properties to the DOM object.

Personally, I'd love to see HTML add a standard way to refer to the value of JavaScript objects in memory. This is already done (badly in my opinion) with the blob:// url you can pass to media elements. Declaratively defining an element with a live JS variable for attributes would be very useful in lots of ways, and not specific to any programming style.

>> If I want to pass an array of ids to a sub-component declaratively, there's not really an easy way to do it.

Yes, there is. See https://github.com/wisercoder/uibuilder

Err, no. What part of that mass of crazy non-JavaScript did you think was "easy"? Wow. I didn't even know TSX was a thing. To each his own, but yet another dependency written in indecipherable pseudo-script (regardless of its popularity) is not my idea of easy.

If you're going to flog your pet project repeatedly, you should at least provide a substantive response around it. This comment provides no value. It's just an ad.

Reply on news.ycombinator.com