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
2 answers

Missing decorators specifier in lit package

I have installed lit package via npm, then i replaced my-element.ts file with my own .ts file and also updated the package.json file with the new .ts file Error details `import { LitElement,html,css } from "lit"; import { customElement, property }…
Rambevha Dakalo
  • 11
  • 4
0
votes
1 answer

Bundling Lit components

I'm a bit about confused how I'm supposed to be referencing/importing my Lit components. The components aren't making it into my esbuild bundle, because, well, they aren't referenced. Suppose I have ParentComponent which renders ChildComponent via…
TKF
  • 138
  • 1
  • 10
0
votes
0 answers

Why the string variable is not rendered?

I am trying to render the svg icon based on the condition, whether aria-label is provided or not. return html` ${styles}
badm
  • 219
  • 2
  • 13
0
votes
1 answer

Redux state reset when invocing new route using Vaadin router in Lit project

I am using redux for state management and Vaadin router for SPA routing. If I invoke av new route by clicking a Go to charger view the charger view renders in the router outlet and state remains intact. The problem arise when…
AntonA
  • 21
  • 3
0
votes
0 answers

TypeError: Cannot read properties of undefined (reading 'navigationStart')

This error appears when multiple pages are tested by test run (vitest). Pages are built with lit.dev (web component)
Hiten B
  • 61
  • 1
  • 12
0
votes
1 answer

LitElement does not update when attribute changed

I have very simple Lit component with an attribute. I can change this attribute outside and Lit component receives new value and can display it, for example in the tag. This operation works as many times as I change the attribute. Problem…
Pavel K
  • 21
  • 2
0
votes
1 answer

Composing lit template using a dynamic class

Is there a way of composing a template in Lit using a dynamically derived Lit Element? I'm talking something like this: import { chooseCorrectComponent } from "./chooseCorrectComponent.js"; let myLitElement =…
Tom Millard
  • 493
  • 6
  • 19
0
votes
1 answer

using axios in a modern-web web-dev-server setup using lit, esbuild and ts results in an error while transforming axios/lib/adapters/http.js

Minimal Reproducible Example First, here's a repo where the problem can be reproduced: https://github.com/wimdetroyer/litelement-ts-esbuild-axios the problem can be reproduced by running either npm run start or npm run test Problem I'm trying to add…
wimdetr
  • 390
  • 1
  • 3
  • 16
0
votes
1 answer

Deploying a Lit Web Component - Struggling at deployment

I am new to lit specifically, and web components in general. I have built a web component for usage in Wix (as a custom element), just using straight vanilla js, and have found some success. See https://app.njaplatform.one/rating-element.js for a…
FrustratedCoder
  • 51
  • 7
0
votes
1 answer

Lit Web Component - Trying to select element

I am trying to transform this element into a standard web component using Lit. (https://www.w3schools.com/howto/howto_js_image_comparison.asp) I totally new to Lit and to web components and am struggling to select elements from the shadow DOM. Right…
Slaveworx
  • 581
  • 1
  • 9
  • 22
0
votes
1 answer

LitElement and server side rendering

I've been trying to make a Web Component with LitElement that works with server side rendering environments (SSR) like NextJS and VueJS, without the need for any janky client-side-only imports. According to Lit's documentation this should be…
Johan Martin Aarstein
  • 80
  • 2
  • 9
0
votes
0 answers

How to I check the contents of a functionality of a web component function using sinon?

I am relatively new to web components and testing them. How do I test the functionality of a function? createObjForStartBusiness() { this.financingObj = []; if (this.dropDownValue === common.ONE_YEAR_OR_LESS) { if (this.ammountEntered >= 1250 &&…
John
  • 161
  • 1
  • 3
  • 7
0
votes
0 answers

How to test if a function is called using open/wc testing with sinon?

I am new to web components, and am using LIT framework. I have been breaking my head trying to figure this out. This is my function. createObj() { this.financingObj = []; if (this.dropDownValue === common.ONCE) { if (this.ammountEntered >= 2000 &&…
John
  • 161
  • 1
  • 3
  • 7
0
votes
1 answer

How to automate testing function with click handler that have async await inside the function using karma-jasmine?

So i'm trying to testing on my button that run the function asynchronously. this is my button logic looks like. // Function below will run when user click the button this._pageModule.favoriteButtonCallback = async () => { try { …
Dapa
  • 11
  • 3
0
votes
0 answers

Bitdev and Storybook | Consuming components using @lit-labs/react causing adoptedStyleSheets error

The issue here is I have lit element components that get wrapped in React using lit-labs-react. I have 1 component working with styles and rendering successfully. Then adding another component causes the error below. Seems to only happen when using…
Kyle
  • 55
  • 1
  • 8
1 2 3
…
21 22