TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

WebComponent libraries lit-HTML and litElement released

29 pointsby velmuover 6 years ago

10 comments

balloobover 6 years ago
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.<p>One of the coolest thing is directives, <a href="https:&#x2F;&#x2F;lit-html.polymer-project.org&#x2F;guide&#x2F;template-reference#built-in-directives" rel="nofollow">https:&#x2F;&#x2F;lit-html.polymer-project.org&#x2F;guide&#x2F;template-referenc...</a> (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.<p>For people interested in a UI built with it, the Home Assistant demo is at <a href="https:&#x2F;&#x2F;demo.home-assistant.io" rel="nofollow">https:&#x2F;&#x2F;demo.home-assistant.io</a> and source is at <a href="https:&#x2F;&#x2F;github.com&#x2F;home-assistant&#x2F;home-assistant-polymer&#x2F;tree&#x2F;dev&#x2F;src&#x2F;panels&#x2F;lovelace" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;home-assistant&#x2F;home-assistant-polymer&#x2F;tre...</a>
spankaleeover 6 years ago
Maintainer of lit-html here. AMA, especially if you&#x27;re interested in how lit-html works, or where we&#x27;re going next :)
评论 #19089900 未加载
passleover 6 years ago
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: <a href="https:&#x2F;&#x2F;open-wc.org&#x2F;" rel="nofollow">https:&#x2F;&#x2F;open-wc.org&#x2F;</a>
评论 #19089712 未加载
codepsychoover 6 years ago
We have used Polymer (1, 2 &amp; 3), lit-html and LitElement on large production websites for some time now.<p>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.<p>Reuseable components really are easy now and really are reuseable. It&#x27;ll be very interesting to see where this project goes...
bennypowersover 6 years ago
Build GraphQL apps using lit-element for rendering with lit-apollo:<p><a href="https:&#x2F;&#x2F;npm.im&#x2F;@apollo-elements&#x2F;lit-apollo" rel="nofollow">https:&#x2F;&#x2F;npm.im&#x2F;@apollo-elements&#x2F;lit-apollo</a><p>I built a demo chat app that got a 98 lighthouse performance score<p><a href="https:&#x2F;&#x2F;lit-apollo-subscriptions.herokuapp.com" rel="nofollow">https:&#x2F;&#x2F;lit-apollo-subscriptions.herokuapp.com</a>
abdonrdover 6 years ago
Awesome!<p>The project is still in beta, but Freestyle Stats website is built with LitElement &amp; Redux! It has a nice +95 Lighthouse score!<p><a href="https:&#x2F;&#x2F;freestylestats.com" rel="nofollow">https:&#x2F;&#x2F;freestylestats.com</a>
btoproover 6 years ago
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!
anobletover 6 years ago
Love lit-html&#x2F;lit-element! Personal project: <a href="https:&#x2F;&#x2F;my-project-75792.firebaseapp.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;my-project-75792.firebaseapp.com&#x2F;</a>
akmittalover 6 years ago
Both these look great, But I dont understand Googles stand on Polymer now. Does Polymer use this or Polymer and lit-* are going different direction
评论 #19093740 未加载
评论 #19093842 未加载
zeroc8over 6 years ago
Are there any ready made components available yet? Something similar to PrimeNG or Vuetify?
评论 #19112178 未加载