Questions tagged [lit-element]

A base class for creating custom elements with the Lit JS library.

LitElement makes it easy to define web components using /Lit. LitElement allows you to declare reactive properties that re-render the component and reflect to attributes.

It uses to render DOM.

677 questions
9
votes
1 answer

How to add mixin for height in mwc textfield?

I am using polymer 3 and lit-element(2.2.1). The version of mwc-textfield is 0.13.0. I have read the documentations related to this version.In this documentation, I have found that we can add mixin for height. I had tried several ways but did not…
Himabindu
  • 634
  • 8
  • 22
9
votes
3 answers

Dynamic tags for lit-html not possible?

Can anyone tell me why I cannot use variables within lit-html's html method? const h1 = 'h1'; return html` <${h1} class="a-heading ${classes}"> `; If I replace ${h1} with h1 that works without problems.
codepleb
  • 10,086
  • 14
  • 69
  • 111
9
votes
1 answer

lit-element: how to efficiently share a property from parent to child custom element

Question: Is there a way to propagate a property change to a child element without triggering its render function? Currently when I update the property in parent's switchViewModeHandler it triggers a re-render on the child. Use-case: toggling the…
montrealist
  • 5,593
  • 12
  • 46
  • 68
8
votes
2 answers

How to clear datalist input on click?

I have this datalist inside a Lit-Element web component:
8
votes
3 answers

Visit new url Cypress

I'm new to Cypress. My app as a "routing system" manually changes window.location.hash. At some point, I click on a button that changes the hash and consequently should change the page during the test. I can see a "new url" entry appearing during…
alfredopacino
  • 2,979
  • 9
  • 42
  • 68
8
votes
6 answers

How to use Font Awesome with Polymer LitElement

I can't get the Font Awesome icons to work with LitElement, because CSS styles don't pierce the shadow boundaries of custom elements. Is it possible to use Font Awesome or other icons with LitElement?
grohjy
  • 2,059
  • 1
  • 18
  • 19
7
votes
2 answers

How do I bind a value to a web component's attribute using Angular?

Let me preface this by saying that I've never really used Angular before. I'm trying to debug a problem one of the users of my web component library is facing. I have a custom element, using lit-element, that has a boolean property. That boolean…
Brian Schlenker
  • 4,966
  • 6
  • 31
  • 44
7
votes
1 answer

How to deploy / use lit-html, lit-element on a live web server

I started trying out lit-html and lit-elements, playing around with it and now I git in the problem where I cannot find out how to publish such code online. Never worked with Node-js packages on online platforms, only used bits of code from it.…
7
votes
1 answer

Lit-Element: How do I set global/reset css

What is the current best practice to set global/reset CSS if I'm using Lit-element? I have tried 1) Inline them in