Lit-html: A few blowing my mind questions :)

[MVSICA-FICTA]

Just discovered lit-html and it makes a lot of sense, as I seem to keep moving toward a more frameless approach. Coming from a framework component way of thinking about the UI I of course have some basic how-to-I-do-it in lit-html questions:

Styling: I see there is support for the style tag but what about changing classes on lit-html rendered functions (nodes) using JS at runtime? I also want to use all the goodness of CSSVARS and directly changing CSS from JS, instead of wrangling with some frameworks contorted way of managing styles on components.

Mounting: From this example (https://www.youtube.com/watch?v=lTnZ9VUIWL0) it looks like the nodes labeled with Part# are used as mount points. Does this replace the targeted node or just append to it? Since the UI I have in mind is mostly composed of dynamic content the lit-html functions look ideal and are very in line with the FRP way of developing.

Pattern: Is the new pattern then to define minimal static HTML structure and then to target nodes in the static structure to decorate the UI as app state changes. If so I am in love because being able to use render functions instead of importing components (even with dynamic importing) in a here today gone tomorrow framework would be bliss.

Observables: I'd love to see full integration with RxJS. Support for binding event types to streams and being able to pipe them to RxJS logic functions, which could just exist in external modules would be great. Something like John Lindquist's recent Vue-Stream or React-Stream would be perfect!

[LarsDenBakker]

Welcome to the wonderful world of lit html :) I'll try to answer your questions.

For dynamic style changes at runtime you can just trigger a re-render and change the classes, the same way you might be used to in a framework like react. lit-html is optimized to handle re-renders efficiently.

In lit:
html`<div class="${dynamicClasses}"></div>`;
In lit-extended (use a $ for attributes):
html`<div class$="${dynamicClasses}"></div>`;

You can also use css variables to update styles dynamically like you would in vanilla js.

The rendered template is appended to the mounting point, it does not replace it.

It's upto you how you want to structure your application. If you define the static structure in your index.html upfront you can take advantage of streaming HTML when your user first visits your page. It might be quite some work to manually everything up though. You can also just have a single mounting point for your application, and render everything through javascript from there on.

I don't think the standard lit library will include support for non-standard functionalities like RxJs observables, since they are not an ecmascript standard. It's possible to write custom directives though, so I think we will see community contributions that make this possible.

[MVSICA-FICTA]

Thanks for the clarification. Nice to learn about CSS working so well and about the the freedom in how the application can be structured. Ultimately, the whole app could then be build dynamically based on state, which is the best news yet.

Definitely interested in support for RxJS, from the issues it looks like it already works, yet some further integration could make it even better.

Will continue to investigate, might have a few more questions so will leave this issue open for a bit...

[MVSICA-FICTA]

Had some time to look into lit-html and HyperHTML as well. Very interesting history and I'm glad to see this alternative to the VDOM of the past years take the stage. Got the essential demos working for me and I'm sold on this functional approach. It seems lit-html is separate from Polymer but I do like how they can optionally be used together in Web Components.

I guess now I'm mostly interested in the future, what does the roadmap look like?

[justinfagnani]

Hey there @MVSICA-FICTA nice to see that most of you questions have been answered. I'm going to open up a roadmap issue to cover the rest.

[justinfagnani]

Roadmap: https://github.com/Polymer/lit-html/issues/333