
WebComponent libraries lit-HTML and litElement released - velmu
https://www.polymer-project.org/blog/2019-02-05-lit-element-and-lit-html-release
======
balloob
At Home Assistant we have used Lit Element to power our new user interface and
it has been great. Small and fast components, easy to learn for new
developers, intuitive API.

One of the coolest thing is directives, [https://lit-html.polymer-
project.org/guide/template-referenc...](https://lit-html.polymer-
project.org/guide/template-reference#built-in-directives) (you can also write
your own). Directives are attached to a DOM element and can interact with the
DOM as they see fit. Examples are awaiting an async iterator and writing
results to the DOM as they come in, or have a directive that attaches an
animation or ripple effect to an element on click.

For people interested in a UI built with it, the Home Assistant demo is at
[https://demo.home-assistant.io](https://demo.home-assistant.io) and source is
at [https://github.com/home-assistant/home-assistant-
polymer/tre...](https://github.com/home-assistant/home-assistant-
polymer/tree/dev/src/panels/lovelace)

------
spankalee
Maintainer of lit-html here. AMA, especially if you're interested in how lit-
html works, or where we're going next :)

~~~
tobr
Congratulations on releasing! I think it’s the right approach to use the
platform rather than extending it a la JSX. I have a few questions:

1) What is the situation with the patent grant? I know React had something
similar at an earlier point, which was heavily criticized and eventually
removed.

2) Is there a way to precompile templates, sort of like what a lot of CSS-in-
JS libraries do?

3) I was browsing through the source a couple of weeks ago, and it came across
as a rather convoluted everything-must-be-a-class design, which I found
surprising considering the simple functional style the library encourages
externally. Do you think this is motivated over a more straightforward,
procedural design?

~~~
spankalee
Thanks!

1) I know basically nothing about patents, grants and licenses, so I can't
comment there.

2) There are transforms to help minify lit-html templates, like
[https://github.com/asyncLiz/rollup-plugin-minify-html-
litera...](https://github.com/asyncLiz/rollup-plugin-minify-html-literals) .
See [https://github.com/web-padawan/awesome-lit-html](https://github.com/web-
padawan/awesome-lit-html) for more

3) lit-html requires objects with state and behaviors. Seems a perfect fit for
classes. We usually get feedback that the source is very readable. I don't
think there's any tension between the implementation using classes and the API
surface being functional.

------
passle
If people are interested in getting started with web components, lit-html and
LitElement, we have a bunch of scaffolding and tooling ready to go at:
[https://open-wc.org/](https://open-wc.org/)

~~~
spankalee
open-wc.org is a really great project. Thanks for your work there!

------
codepsycho
We have used Polymer (1, 2 & 3), lit-html and LitElement on large production
websites for some time now.

Following the progression was a rocky road at times but it really does now
provide a very lean base to build from. I rarely find the need to use a
framework or some such library anymore unless for consistency within existing
projects.

Reuseable components really are easy now and really are reuseable. It'll be
very interesting to see where this project goes...

------
bennypowers
Build GraphQL apps using lit-element for rendering with lit-apollo:

[https://npm.im/@apollo-elements/lit-apollo](https://npm.im/@apollo-
elements/lit-apollo)

I built a demo chat app that got a 98 lighthouse performance score

[https://lit-apollo-subscriptions.herokuapp.com](https://lit-apollo-
subscriptions.herokuapp.com)

------
abdonrd
Awesome!

The project is still in beta, but Freestyle Stats website is built with
LitElement & Redux! It has a nice +95 Lighthouse score!

[https://freestylestats.com](https://freestylestats.com)

------
btopro
Been using Polymer for the last year and loving it. Happy to do very little to
get my element portfolio progressively over to litElement. Congrats to the
polymer project team on getting this out there!

------
anoblet
Love lit-html/lit-element! Personal project: [https://my-
project-75792.firebaseapp.com/](https://my-project-75792.firebaseapp.com/)

