Questions tagged [lit-html]

Lit is a JS web component library. Lit HTML is the render component that uses tagged template literals to only update the parts of the DOM that have changed. Use this tag on questions related to using it standalone, and in components other than those based on LitElement.

is a JS web component library.

Lit HTML uses tagged template literals to build DOM that can be reused. It can be used standalone to build components or render DOM without the .

236 questions
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

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

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…
5
votes
1 answer

lit-element passing data from one component to another

I am currently learning how to user lit-element v2.0.0-rc.2 I have two components app.js and list-items.js. In app.js I am collecting data from local storage and storing it in this.todoList, Im then calling this.todoList in my list-items.js but the…
DRW
  • 335
  • 1
  • 3
  • 17
5
votes
4 answers

Use properties or slot for pass data to child element

I've a question about what it is the best way to pass some value from a father component to a child component and show the value, because I've tried to pass value with properties and slot and both ways work. Properties: I've a movement list and use…
5
votes
1 answer

How to use MDC components within lit element?

I am trying to use a mdc-component (say mdc-textfield) within a lit element. Looks like I have to import both css and js files into the element. I'm quite unsure of how to import css into the lit-element. BTW I use polymer serve without any…
ryanafrish7
  • 3,222
  • 5
  • 20
  • 35
4
votes
1 answer

lit-html : is there a way to force re-render of a template?

I have been using as lit-html in my own custom web-component library. I have third party webcompobent : html`
Anurag Vohra
  • 1,781
  • 12
  • 28
4
votes
2 answers

Polymer/Lit-element, child component doesn't re-render when the property is modified by the parent

live example Basically: I place the child component inside the parent's html. The child component has a property title inside the static get properties() object. In the parent component, i assign the child component's title property to a private…
dvolp
  • 43
  • 1
  • 3
4
votes
1 answer

JavaScript: I Can't import anything

How can I import lit-html in my code? I Have this codes: the index.js file in js folder: import { html } from "lit-html"; myDiv = html` `; document.body.innerHTML += myDiv; and the…
user11955706
4
votes
1 answer

Run a function once all children element are _actually_ updated

In lit-html we have the firstUpdated() method to run one-time initialisations once an element is rendered. What if you need to run a function only once all children within that template are updated? And what if your template includes native form…
Merc
  • 16,277
  • 18
  • 79
  • 122
4
votes
1 answer

what is the decoration query for in lit-element?

I can not understand what it exactly does according to the documentation. This documentation is not detailed enough. Is there an example?
zzzgoo
  • 1,974
  • 2
  • 17
  • 34
4
votes
2 answers

How to load google font in LitElement

I am using LitElement and I am trying to load google-font at the element level. I have tried returning it in an HTML literal in the connectedCallback event, but it does not work. I could not manage to do it in the get styles() method. Where should…
JoceM
  • 53
  • 1
  • 5
1
2
3
15 16