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

Lit: Update on reflected attribute change

I have a custom element: my-form, which renders another custom element: my-select. my-select has a property called option-checked. This property is defined with { reflect: true }, so when an option is checked its attribute is updated in the…
dbj44
  • 1,919
  • 2
  • 24
  • 45
2
votes
1 answer

Button Web Component using lit element

I am a beginner to webcomponents and I am using lit with TypeScript to build a custom button web component. The specifications require me to render a and a

tag as children in the custom component. Eg:

bazinga
  • 87
  • 2
  • 9
2
votes
0 answers

Notify server-side, an AbstractSinglePropertyField, of property change inside LitElement with Vaadin Flow

Up to at least Vaadin Flow 23 the official components are Polymer3 (from what I saw), which is basically deprecated in favour of Lit. Given a server side AbstractSinglePropertyField (see below for code), that wraps a simple checkbox and is supposed…
cfrick
  • 35,203
  • 6
  • 56
  • 68
2
votes
1 answer

Looping through JSON object with Alpine JS in Lit 2.0 web component

I can't figure out how to loop through the connections object from fetch using x-for and Alpine JS to display the 2 records. I tried looping through ${this.connections} with x-for but got a "object Object" error. import { LitElement, html } from…
Michael Harding
  • 57
  • 1
  • 5
2
votes
2 answers

How to make Vue and Vite work with web components?

I want to migrate my Vue 2 project from webpack to Vite. And have to use 3rd party web components that built with lit-element. Those components throws errors during the runtime (by vue): Unknown custom element: < foo-component > - did you register…
eXception
  • 1,307
  • 1
  • 7
  • 22
2
votes
1 answer

What is the "right" way to nest components?

This seems like a very basic questions, but neither the documentation nor code examples I found were able to tell me. Given the following example: import { FlowIdentification } from "./flow-identification"; @customElement("bb-flow") export class…
codepleb
  • 10,086
  • 14
  • 69
  • 111
2
votes
1 answer

Javascript functions stop working when using import at top of script, even without trying to use what's imported

I'm trying to recreate a simple program of mine using lit instead of just basic js, but adding import statements seems to break every function. Things seem to work just fine with "type": "module" alone in my package.json, but the second I change…
Cameron Crane
  • 113
  • 1
  • 12
2
votes
2 answers

Lit components do not automatically request an update on property change (problem only in my storybook)

This is really odd: I'm using lit in a storybook (using @storybook/html). I do not know why, but in my environment lit does not update the component automatically when a property has been changed. If I call requestUpdate explicitly, it is indeed…
Natasha
  • 516
  • 7
  • 24
2
votes
2 answers

Array of typescript user-defined types/objects as property in Lit v2

I would like to convert my existing Javascript CustomElements/WebComponents (made with Lit v1 and ported to v2) to TypeScript. Example: export class MyElement extends LitElement { ... @property({type: String}) name = 'World'; ... } ... or…
StephanB
  • 315
  • 2
  • 17
2
votes
2 answers

Lit2.0 how to submit form data to backend

Am using Lit2.0, Material Web components, Django (backend). one reference: https://www.thinktecture.com/en/web-components/flaws/ I don't understand how to submit form data from Lit component to backend (Django) form.html contains Lit component…
Yogi
  • 21
  • 1
  • 1
2
votes
1 answer

Lit reactive controllers fail to requestUpdate in nested components

I want to create a basic state management using Lit reactive controllers. The purpose is to share property values accross the application. The issue occurs when a controller is attached to a view and to a component nested in the view. When value…
MadeInLagny
  • 185
  • 1
  • 12
2
votes
1 answer

Stripe Elements cannot be mounted in a ShadowRoot. Please mount in the Light DOM

I have been using Stripe for my lit element project. The mounting the card element doesn't works at all. Here is my code sample that I am using import { LitElement, html, css, property, query } from "lit-element"; import { connect } from…
Kiran Tangellapalli
  • 162
  • 1
  • 1
  • 12
2
votes
1 answer

Version conflict - Uncaught DOMException, the name "mwc-icon" has already been used with this registry. Custom Component

I'm trying to use Material Custom Component and also using some other components. But I have version conflict Uncaught DOMException. Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "mwc-icon" has already been…
Hiten B
  • 61
  • 1
  • 12
2
votes
1 answer

How do I specify a default value in vaadin-combo-box?

I have created a combo box component using lit and vaadin-combo-box. I was able to create the combo box without any problems, but I don't know how to set the default value. How can I set the default value to "Label 1" before selecting it? import…
dede
  • 57
  • 5
2
votes
1 answer

lit: wrap expensive dom in different tags

I have an expensive list of DOM nodes in my component, which under a certain condition (e.g. parent element width < 500px) needs to be wrapped in another component (e.g. a gallery): render() { const expensive =…
dav1d
  • 5,917
  • 1
  • 33
  • 52
1 2
3
…
21 22