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

What causes the error "Failed to set the 'currentNode' property on 'TreeWalker'"?

While building a WebComponent using Lit-Element and Typescript I got this rather cryptic error message. The error occurs when I try to set the checked attribute to an element. The culprit is something similar to this: return html`
ndvo
  • 939
  • 11
  • 16
0
votes
1 answer

Lit-element children component not re rendering JS code based on updated props

Lit-Element updated .props not invoking full re-render of child component, i.e. the javascript code inside firstUpdated() of child constructs a leaflet map based on .props being passed in from parent component, when the parent component updates…
Jdd B
  • 1
  • 2
0
votes
1 answer

LitElement maintain internal state

I am trying to build a chart with LitElement. The chart takes a data property from the user, and displays this data (the chart plot). It also gets series names from the data, in order to display a legend with a checkbox for each series that can be…
Max888
  • 3,089
  • 24
  • 55
0
votes
2 answers

How to map one attribute to two properties in litElement?

I am working in a litElement project, and in a component, I have an attribute that needs to be mapped to a property, and computed with a function to another one, something like this: const calculateTwo(val) { return `${val} ${val}` } class…
Víctor
  • 3,029
  • 3
  • 28
  • 43
0
votes
1 answer

eventContext leaking with LitElement

I'm using lit-element (v2.3.1) & lit-html (v1.2.1) and having a memory leak where as a result of rendering, detached DOM nodes are not cleaned by GC and the only retainers shown for them by Chrome DevTools are WeakMaps used internally by lit-html to…
0
votes
0 answers

Lit-html not found when using polymer build

I have a fairly basic lit-html app that works locally when it's not build. However when I build it using polymer build using the following config: { "entrypoint": "index.html", "shell": "src/school-home.js", "sources": [ …
reaper_unique
  • 2,916
  • 3
  • 28
  • 48
0
votes
1 answer

Convert between a string and Object properties in Litlement

The custom element below gets the value of the code in the JSON passed to the observation-status tag and displays it as the selected option. The challenge is that I get the error "observation-category.js:42 Uncaught (in promise) TypeError: Cannot…
0
votes
1 answer

How do I assign a variable to a DOM Node created by lit-html

I'm using lit-html to render html templates, but after they've rendered I need to assign a variable to a couple of nodes inside the template result. Currently, the only way I've found to do this is with a dirty timeout like this: let…
Tom Millard
  • 493
  • 6
  • 19
0
votes
2 answers

Cannot display child element

I'm a beginner lit-element developer and trying to solve a simple problem. This is my html page: LitTest
Élodie Petit
  • 5,774
  • 6
  • 50
  • 88
0
votes
1 answer

Lit-html dynamic import not rendering

I am trying to import a function which returns a lit-html template, and then render it. If I define the function in place, the template successfully renders, however if I try and import the template dynamically, it renders [object Object]. import {…
Max888
  • 3,089
  • 24
  • 55
0
votes
1 answer

Responding to User Input lit-html

I am using lit-html and I can't seem to get the renderer to update, or any function to run on user input. I would like to check an input field on typing. I can't find any examples online showing responding to user input. Here is the full…
0
votes
1 answer

ISML to lit-html

I'm having difficulties with rewriting ISML-Templates to lit-html. e.g. How does the isml tag work for lit-html?
0
votes
1 answer

Issues with IE11 when using lit-html

I am working with lit-html templating library, ParcelJs bundler using Typescript, compiling in to ES2019. With such I am creating a js library to be consumed by consuming applications. This works great on most browser excepts in IE11. I get the…
amateur
  • 43,371
  • 65
  • 192
  • 320
0
votes
1 answer

External class call a LitElement component method (passing html template), and component method updates its html template

I need to have an external class comprising of game logic call a LitElement component, and pass it a html template literal which the component will use to update a portion of its own html template literal. In the code below you will see a method of…
eadgbe
  • 93
  • 2
  • 9
0
votes
2 answers

How to translate plain CSS into web component and correctly apply child selector?

I have the code also in a Pen at https://codepen.io/veksi/pen/xxGpXWM?editors=1010 but reproduced here to preserve it for posterity. I have a piece of code that works when using CSS without using web components (or lit-html in this case, but…
Veksi
  • 3,556
  • 3
  • 30
  • 69