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

Is it possible to override the static styles within a Lit component based on an external property?

I'm trying to specify a theme as a property, and then override the static styles property on the Lit element. This would be handy because then I could share an interface with my users such that they would have a type-safe way of composing custom…
Philippe Fanaro
  • 6,148
  • 6
  • 38
  • 76
1
vote
2 answers

Importing socket.io-client into Lit controller throws error "Requested module does not provide an export named default"

I'm currently building a controller for a Lit web component with TypeScript and when I am importing socket.io-client ( import {io} from "socket.io-client" ), it compiles correctly and starts the dev server only to then throw the error Uncaught…
2Can
  • 33
  • 5
1
vote
0 answers

Lit - HTML Minifier - character being removed after the build

I have a project using lit and I'm using webpack to bundle my project. I have installed the module minify-html-literals-loader to minify the html but I have a specific issue that I don't understand and I couldn't find the solution : it seems that…
user3218905
  • 23
  • 2
1
vote
1 answer

I would like to override the style a vaadin-dialog web component, position it else than in the middle of the page

{ this.DimensionDialogOpened = event.detail.value; //console.log("dialog opened"); } }" …
joekrom
  • 280
  • 2
  • 7
1
vote
2 answers

Adding functions to lit web components in react with typescript

I have a web component i created in lit, which takes in a function as input prop. but the function is not being triggered from the react component. import React, { FC } from 'react'; import '@webcomponents/widgets' declare global { namespace JSX…
Sudeep Mishra
  • 43
  • 6
1
vote
0 answers

how to delegate content from vue slots to web components slots?

The Problem Let's say we have a page template written as a Web component in a shared library to keep the company design system consistent. That page has some slots: export class PageTemplate extends LitElement { static properties = { title: {…
João Melo
  • 784
  • 6
  • 16
1
vote
1 answer

How to change the style of a Lit Element when a certain event is triggered?

(New to the Lit element environment, so apologies for the naive question) Code Summary The code below is a File Uploader web component made using Lit Element. When the File is selected, the _inputHandler function validates the file, and if valid,…
GigaCoder
  • 13
  • 4
1
vote
0 answers

How to add external styles to Bit dev application or components

Within bit.dev, how can we import external stylesheets into bit.dev as we have an external styleguide we would like to import into our components within bit.dev. We are only using lit-elements within our application so theme providers are not an…
Kyle
  • 55
  • 1
  • 8
1
vote
1 answer

How to solve the lit build-in directives import error?

Using lit 2.5.0 in combination with vite I run into an issue using the lit build-in directives. Following the docs I added an import to my lit js component like: import { when } from 'lit/directives/when'; But when I view the resulting site in the…
Alex Jongman
  • 189
  • 10
1
vote
1 answer

How to call lit component in react with ScopedElementsMixin

I want to use web component Button (lit) in my project with similar tag. For example: if tag exists on website then create tag . That's why I use ScopedElementsMixin. Is it possible to call the button-test tag so…
funfelfonfafis
  • 187
  • 2
  • 15
1
vote
1 answer

Lit component repeat.js console log error TypeError: items is not iterable

I am using Lit components library. In my code I fetch data and putting it in a reactive property. Then I am using repeat.js function from Lit to iterate thought that array. Everything is working but I got an error in console that I want to get rid…
tech27
  • 67
  • 7
1
vote
1 answer

How to Form Tables Correctly When HTML Template Components are Separated?

When building tables in Lit, sometimes I need to generate different parts of a table in different parts of the code. But when I put everything together, the table does not look the same as if it were declared all in one place. See this playground…
herbyonline
  • 13
  • 6
1
vote
1 answer

Can Lit or Web Components know attribute of parent component?

I have code like this: Is it possible for my-component to know it is within theme-component with a theme of dark? Or do I also need to pass theme=dark manually into…
Dave Stein
  • 8,653
  • 13
  • 56
  • 104
1
vote
1 answer

Why isn't Lit calculating my background color within Web Components?

I have some very basic code like this #component file import { html, LitElement } from 'lit'; import sheet from './css/styles.js'; export class CaiWc extends LitElement { static styles = [sheet]; render() { return html`

Hello…

Dave Stein
  • 8,653
  • 13
  • 56
  • 104
1
vote
1 answer

What is the best way to toggle between two different Lit components?

I am working with Lit components. I want to create two buttons and toggle between two different components. What is the best approach to achieve that?
tech27
  • 67
  • 7
1 2 3
…
21 22