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

text input (input type="text") value is not updating after changing property using an event with LitElement library

The source code: import { LitElement, html, css } from '../vendor/lit-2.4.0/lit-all.min.js'; export class SearchInput extends LitElement { static get properties() { return { src: { type: String }, items: { type:…
Pedro Urday
  • 93
  • 2
  • 5
1
vote
0 answers

How to prepare vite.config.ts for `build` website designed with Vitejs & Lit

I've been playing with Vitejs, Lit-element & TailwindCSS to upgrade my skills. Tried to deploy a website based on components. Everything is good with the npm run dev, my website works in the preview. The real problem is with the npm run build. Even…
devillived
  • 11
  • 2
1
vote
1 answer

Constructor is called twice

I have the following code render () { return html`${mobile ? html`${this.renderPane("side")}` : html `${this.renderPane("bottom")}` ` } renderPane(slot: string) { return html `
Chris Hansen
  • 7,813
  • 15
  • 81
  • 165
1
vote
1 answer

How to apply entire string as an attribute/prop to Lit web component?

I have a basic Text Lit web component with a red color for styling as such import { LitElement, html } from "lit"; import { customElement } from "lit/decorators.js"; @customElement("bb-text") export class Text extends LitElement { render() { …
Sam Scolari
  • 113
  • 1
  • 10
1
vote
0 answers

Lit Element - upgrading elements functionality in html

I'm learning Lit and I want to make some common functionality that can be added either when extending the element or when using html`` to make a TemplateResult. Example For example, I have a custom input element which I want to be able to optionally…
Joe Jankowiak
  • 1,059
  • 12
  • 37
1
vote
1 answer

Render JSON to HTML without dynamic tags

Let's say I have a data structure like this [{tag: 'h1', text:'lorem ipsum', attrs:{data-foo: 'bar'}}, {tag: 'blockquote', text:'dolor sit'}, {tag: 'p', text:'atmet'}] that I want to render into HTML:

lorem ipsum

dolor…
nehalem
  • 397
  • 2
  • 20
1
vote
1 answer

LitElement: Call a Method from external web component

I'm very new to Lit and Web Components. I hope you can help me. I wrote the following Element: import {html, LitElement, PropertyValues} from 'lit'; import {customElement, property} from 'lit/decorators.js'; import…
c0r3
  • 21
  • 2
1
vote
1 answer

What is the correct way of updating a HTML Input element after data changed in a lit-element?

I have a bug in an application using lit-element custom web-components: When manually editing a HTML Input element, changes in the internal component state are no longer reflected in that element. However, before doing any manual edits, the values…
exhuma
  • 20,071
  • 12
  • 90
  • 123
1
vote
1 answer

lit-html: issue w/ using change event to propagate changes back to data model

In the below code, i am looping through a list of my data model (this.panel), and generating an input box for each. I would like to propagate any changes made by the user back to the model. to do this i am storing the index of the item im…
mike01010
  • 5,226
  • 6
  • 44
  • 77
1
vote
1 answer

LitElement rendering. The result is broken due to comments

Here is my custom element and than you can see on the screenshot the comments that break the styles @customElement('icon-icon') export class Icon extends LitElement { @property({type: String}) icon=''; @property({type: String}) color=''; …
spoff
  • 13
  • 4
1
vote
1 answer

How to reset form with web components?

For our web-components library we are using Lit framework, but recently we have discovered the bug that whenever our custom web components are included into the form, they are getting ignored by form reset(). Do you know how to force custom web…
badm
  • 219
  • 2
  • 13
1
vote
2 answers

Autofill/autocomplete input Web Component shadowDom

TL;DR: Browser Autofill doesn't work as expected when inputs are in shadow DOMs, particularly noticed with the use of Web Components. Clarification: The subject of this post is the HTML autocomplete attribute with a custom Web Component input. This…
Will Mangimelli
  • 150
  • 1
  • 7
1
vote
1 answer

Re-render input field without keeping current value / Shadow DOM

I am working on a network graph editor with an inspector view on the right side. The inspector is a separate web component built with Lit. When I click on a node I would like to be able to view and change properties of the node, like the node title,…
Wizard of Kneup
  • 1,863
  • 1
  • 18
  • 35
1
vote
1 answer

How do I pass data into a slotted element in Lit

How do I pass data to a slotted element in Lit? I’ve tried… <\slot> <\my-component> But doesn’t seem to work, is programmatically the only way to do this?
hegsie
  • 93
  • 1
  • 7
1
vote
1 answer

How to force an update of a subcomponent?

Lit Documentation says: When called with no arguments, requestUpdate() schedules an update, without calling a hasChanged() function. But note that requestUpdate() only causes the current component to update. That is, if a component uses the code…
Fred
  • 57
  • 5
1 2 3
…
21 22