Stack Overflow
Stack Overflow

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
6
votes
1 answer

Lit-Element: which event to use for DOM updates?

The documentation over at github.com/Polymer/lit-element describes the lifecycl, if a property of some lit-element is changed. However, I can not seem to find any documentation about a lifecycle if the DOM content of the element is changed. So…
Sirko
  • 72,589
  • 19
  • 149
  • 183
5
votes
1 answer

How to lazy load items in vaadin grid in LitElement

I have a requirement to render infinite scrollable data in an optimal way in LitElement. Vaadin-grid seems suitable for the use-case. However, the data is huge. So I am trying to lazy load the data in chunks from backend. This backend api supports…
Shruti Nath
  • 53
  • 4
5
votes
1 answer

Using bootstrap in web components shadowDOM

What's the easiest way to use a large css library (like bootstrap) in web components / shadowDOM app using LitElement? Tried the following: Use the link tag within the component. Works, but creates FOUC (flash of unstyled content). Render…
user3757849
  • 199
  • 2
  • 14
5
votes
1 answer

Fetching asynchronous data in a lit-element web component

I'm learning how to fetch asynchronous data in a web component using the fetch API and lit-element: import {LitElement, html} from 'lit-element'; class WebIndex extends LitElement { connectedCallback() { super.connectedCallback(); …
Medical physicist
  • 2,510
  • 4
  • 34
  • 51
5
votes
1 answer

OnChange not fired in input field of litElement

I have following code: export class ViTextfield extends LitElement { static get properties() { return { value: { type: String }, } onChange(e) { console.log(e.target.value) } render() { return html`
…
PassionateDeveloper
  • 14,558
  • 34
  • 107
  • 176
5
votes
2 answers

LitElement - Don't add attribute if value is false

Is there a way to basically render these three possibilities: Note the explicit lack of the attribute someValue on the third. To render this normally I would do: render()…
samanime
  • 25,408
  • 15
  • 90
  • 139
5
votes
1 answer

LitElement equivalent of React "key" concept

Next render looks like this: LitElement will remove the last element and update the…
mikabytes
  • 1,818
  • 2
  • 18
  • 30
5
votes
1 answer

Lit-elements, the idiomatic way to write a controlled component

I'm working with lit-elements via @open-wc and is currently trying to write a nested set of components where the inner component is an input field and some ancestor component has to support some arbitrary rewrite rules like 'numbers are not allowed…
tugend
  • 133
  • 13
5
votes
1 answer

should I use attributes or properties to pass data?

In lit-element, in most of the cases passing data from parent-component to child-component via attributes and via properties result in the same thing. I wonder in which case I should use attributes while which case properties?
zzzgoo
  • 1,974
  • 2
  • 17
  • 34
5
votes
1 answer

LitElement connectedCallback() vs firstUpdate()

As documentation says: connectedCallback fires each time a custom element is appended into a document-connected element also: firstUpdated fires after the first time your component has been updated and rendered The problem is I can't…
O. Shekriladze
  • 1,346
  • 1
  • 19
  • 36
5
votes
1 answer

Where is the state and setState lit-element?

Coming from a react background, i was wondering where is the state and setState equivalent in lit-element, i couldn't find anything useful in lit-element docs. is it private property? or requestUpdate?
Edderd
  • 85
  • 6
5
votes
1 answer

LitElement not updating checkbox in list

I have a simple check list with a delete button for each item. When I check the first item and then delete it, the list updates, deleting the item, but the check box of the next item is checked. The properties of the next item are correct. Here's my…
dork
  • 4,396
  • 2
  • 28
  • 56
5
votes
1 answer

Is there a way to make LitHtml attributes optional?

I'm not talking about boolean attributes, attributes like class if you don't want to add an empty class attribute if there's no CSS class. html``
dork
  • 4,396
  • 2
  • 28
  • 56
5
votes
0 answers

Structuring Material Web Components with LitElement

I do have a problem in structuring my custom lit-element components using material-web-components. Even if I do give them the necessary sass/css classes, they stack e.g. below each other.. I do want to use a top-bar and a expandable drawer. but the…
Lizzal
  • 89
  • 8
5
votes
3 answers

How do you use Bootstrap with Lit-Element?

I would like to make use of Lit-Element with Bootstrap. Currently I have simply imported the external dependancies as suggested here: https://lit-element.polymer-project.org/guide/styles#external-stylesheet Is there a better way to import these 3rd…
Daryn
  • 3,394
  • 5
  • 30
  • 41
1 2
3
…
45 46