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

Storybook web component code examples extra comment tags

We are trying to create a design guideline with lit and want to use storybook to document our components. Here is a example story (in mdx format) that I use: import { html } from 'lit'; import { Canvas, Story } from '@storybook/addon-docs'; import…
Murat Çorlu
  • 8,207
  • 5
  • 53
  • 78
0
votes
1 answer

Class placed on web component does not persist when toggled with mwc-tab-bar

Using lit element 2, I notice when I toggle in the tabs with mwc-tab-bar, the class="hide" on does persist. Why is this? render() { return html`
dman
  • 10,406
  • 18
  • 102
  • 201
0
votes
1 answer

lit until rendering function source

I am facing a weird problem, I am using lit until to wait for a promise to return the template, however the the until's function code is rendered instead, For ex, I have , render() { return html`
…
vine'th
  • 4,890
  • 2
  • 27
  • 27
0
votes
0 answers

Does Lit have mounted lifecycle like Vue?

My Vue app did set up a Blockly element in mounted. I'm updating the app by using Lit. In connectedCallback the target element which hosts Blockly is not contained in the document. connectedCallback(): void { super.connectedCallback() const…
0xCAF2
  • 193
  • 1
  • 11
0
votes
0 answers

How can I use SCSS in Web Components?

I'm using lit.dev to try to set up some Web Components. However, I also want to use Bootstrap as a jumping off point for my styles, and take advantage of the themeing, variables, and mixins they provide. I'm able to define a simple web component…
user3183717
  • 4,427
  • 6
  • 20
  • 42
0
votes
1 answer

How to propagate property value down to a child of a LitElement

I want to compose a LitElement widget from two other widgets. The basic idea would be that one "selector" widget selects something, send an event to its parent "mediator" one, which in turns would update the related property in a "viewer" child…
nojhan
  • 1,222
  • 10
  • 13
0
votes
1 answer

CodeMirror6 in Vaadin 14 & Lit

I created a simple LitElement with CodeMirror6 I can see the Editor, but when I call the same LitElement in Vaadin , the styling is completely gone. I have tried both 14 and 23. Same issue. CodeMirror6 Lit import { LitElement, html } from…
K D
  • 1
0
votes
2 answers

Trying to add the Lit JS framework to an existing Spring Boot project via Webjar dependency in gradle. Results in:Failed to resolve module specifier

When I try to use the framework I am seeing this error in the browser: Failed to resolve module specifier "@lit/reactive-element" In my html thymeleaf template I have: and in the…
tad604
  • 336
  • 1
  • 5
  • 18
0
votes
1 answer

How do I make sure that my Lit element component props are properly typed in Typescript

I have a library where I want to create a button for all the different frameworks out there. All of those components props should have a single source of truth from a Typescript interface: interface BaseButton { tiny: boolean; color:…
pegido
  • 629
  • 1
  • 8
  • 13
0
votes
0 answers

Typescript method not visible (using site dev)

I have this Typescript code for my lit component: render () { const graph : GVGraph = this.graph const svgEle = graph.asSVG() return html` ${svgEle} ` } Everything works well in my IDE VS Code. Typescript transpiler…
Wizard of Kneup
  • 1,863
  • 1
  • 18
  • 35
0
votes
1 answer

Lit - Render function not deleting/updating manual sub-content

I'm busy migrating a static js/html application to Lit. I'm finding the platform to be the most easy to migrate old static code to a framework. However, I'm having some big issues where rendered code are modified externally. Let me explain: …
ceds
  • 2,097
  • 5
  • 32
  • 50
0
votes
1 answer

How do you extend Shoelace web component in Typescript using Lit

After extending component in Lit, I am not getting Typescript errors for the wrong attributes being passed. For example, in the code snippet below, when I call with the wrong attribute typescript shows errors, but if I call…
Md Nazmul Hoque Bhuiyan
  • 3
  • 2
0
votes
1 answer

Vaadin 14 convert Polymer component to Lit with TypeScript

I use Intellij IDEA and Vaadin 14. How can i convert simple Polymer component to Lit with TypeScript? I want to learn how to create Lit with TypeScript in order to upgrade project to latest Vaadin LTS, that is use it as i understand. I tried to…
lanmaster
  • 330
  • 2
  • 16
0
votes
1 answer

Twind Configuration not working with LitElement

I can't seem to get theme working with LitElement. I can set the other props of setup no problem, but the theme doesn't get recognized by Twind. It's also worth mentioning that I get no error when compiling. Anyone have a quick solution? import…
orindholt
  • 73
  • 5
0
votes
1 answer

Lit not working, not giving back anything from the custom web component

I'm trying to learn how to use lit as a dev tool for making web components and I'm having issues with making it run on my system. In the documentation it states that you just need to run the command "npm i lit" on the folder of your project and…
Eurico Teles
  • 1
  • 3
1 2 3
…
21 22