Stack Overflow
Stack Overflow

Questions tagged [lit]

Lit is a web components and HTML templating library. It includes the Lit HTML template renderer and LitElement web component base class.

Lit is a web components and HTML templating library.

Older versions of Lit were split into two parts ( and , now unified in one package):

328 questions
0
votes
0 answers

Need suggestion for lit-- Cannot read properties of null (reading 'insertBefore')

We recently upgraded "lit": "^2.4.1",' Value: TypeError: Cannot read properties of null (reading 'insertBefore') at St.O (lit-html.js:1402:53) at St.T (lit-html.js:1442:36) at St.g (lit-html.js:1488:14) at St._$AI (lit-html.js:1371:14) at $t.p…
user2916563
  • 1
0
votes
1 answer

How to test event and style unsafecss in lit-html using jest and jsdom

I'm trying to create a unit test for my lit-html element using jest. I want to check if the click event is working as expected. To test an event that changes from active to disable when clicked. // my-lit-html-toggle.ts const TAG =…
rluisn
  • 1
  • 1
0
votes
1 answer

How come Lit Labs Router `goto` method isn't updating URL in address bar?

I have a call like this: this._router.goto(`http://localhost:8000/${this.nav.selected}`); When I do relative, the page updates without the address bar. When I do a full URL I get errors. The docs say goto "takes full URLs for top-level navigation…
Dave Stein
  • 8,653
  • 13
  • 56
  • 104
0
votes
2 answers

How Do I Dynamically Add an Attribute to a Lit Element?

I want to dynamically add an attribute to a Lit anchor element but I can't figure out how to do it. Specifically I want to add the download attribute. Simple Attribute This works: return html`Click…
YoungDinosaur
  • 1,550
  • 17
  • 22
0
votes
1 answer

lit-element v2 clearing text fields with null properties

I have lit-element based forms that are reused for editing entities. As an example consider a name form with the following fields
NicolasR
  • 2,222
  • 3
  • 23
  • 38
0
votes
0 answers

chart.js doesn't load in flow+hilla

Made a hilla view based on the standard start.vaadin.com bundle for version 23. I use chart.js version 3.8.2, but also later versions have the same issue. import { html } from 'lit'; import { customElement, query } from 'lit/decorators.js'; import {…
philip van houtte
  • 1
0
votes
2 answers

Interpolating a normal value within a tagged template string in JS

Javascript tagged template strings like html`

hello ${name}

`; are really fantastic ways to do interesting things with each interpolated variable without them just becoming part of the string. Unlike untagged templates such as `

hello…

Michael Scott Asato Cuthbert
  • 3,442
  • 2
  • 22
  • 52
0
votes
3 answers

How to render component from string in litelement

How to render component from string in litelement? It is possible or it is possible to convert string to TemplateResult? My code not working export class MyElement extends ScopedElementsMixin(LitElement) { static get scopedElements() { …
funfelfonfafis
  • 187
  • 2
  • 15
0
votes
1 answer

How to make some changes when calling shouldUpdate?

I want to do the following: When the property "mobile" is changed, check to see if X is true, if so, set set a variable Y and call requestUpdate to re-render the element. The element will render something different based on variable X. so…
Chris Hansen
  • 7,813
  • 15
  • 81
  • 165
0
votes
0 answers

Debugiing Lit Element

I wanted to debug lit decorators in chrom inspect. I am using webpack plugin. I have followed steps https://lit.dev/docs/tools/development/#development-and-production-builds and enabled the dev mode. Still I am getting minimized file version in…
Ashutosh Shukla
  • 1
  • 1
0
votes
0 answers

Should I put this code in the shouldUpdate call?

I have the following shouldUpdate call shouldUpdate(changedProperties: PropertyValues): boolean { if (changedProperties.has("mobile") && !this._isOpeningDialog && this._testStore.isShareSheetOpen) { …
Chris Hansen
  • 7,813
  • 15
  • 81
  • 165
0
votes
0 answers

How can i add directives in custom lit-element tags?

I've defined my custom button using lit-element. I'm trying to use the button in an angular project to print, using the ngx-print library. This library needs triggers placed as directives:
0
votes
0 answers

Custom Web Elements / Lit Elements - Render child elements only when a parent element is present and way to transfer data among all child elements?

New to Stack Overflow and Lit. I'm building something using Lit and wanted to know how do I render element/s only if a parent element is present. I am trying to add a login element dependency which will let user to use these elements only if the…
Metalax
  • 1
0
votes
0 answers

I get an error when using Lit component as a typescript file?

I created a Lit component, following the instructions on their website, and when i use it as a typescript file i get this error: 'Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of…
user19643485
0
votes
1 answer

Bootstrap5 JavaScript functions are not working in shadow DOM lit element

I have implemented web component using LIT Element and integrated bootstrap5 in it. when I try to call modal/popovers/tooltip etc... it is not working. render(){
1 2 3
…
21 22