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

Vaadin 18 | Calling server from client using Littemplate

I am trying to call server side function from client using littemplate. I have checked examples on Vaadin site and found that client may call server side via this.$server._some_method. I tried to use $server in littemplate but during frontend…
user2959065
  • 81
  • 1
  • 8
2
votes
1 answer

"Module parse failed: Unexpected character '@'" when using lit component with NextJS

I try to import a lit component in my NextJS project. Here is my component: import {html, css, LitElement} from 'lit'; import {customElement} from 'lit/decorators.js'; @customElement('my-element') export class MyElement extends LitElement { …
Neilujd
  • 61
  • 1
  • 9
2
votes
2 answers

Enum attribute in lit/lit-element

We are trying to build a component with a property variant that should only be set to "primary" or "secondary" (enum). Currently, we are just declaring the attribute as a String, but we were wondering if there is a better way for handling enums? For…
user1946248
  • 31
  • 2
2
votes
1 answer

Lit-element, how to concatenate TemplateResult?

We have a custom template element that displays the header-title and we would like to extend this component to also show the header title with breadcrumbs when we have clicked on a button. Sample code: ... private…
missMurphy
  • 21
  • 3
1
vote
1 answer

Lit TypeScript decorator issue

I try to get into TypeScript by writing TS based Lit Elements, refactoring a very small project of mine. However it starts to get frustrating since I don't see what's wrong with this code since it's reduced to nearly the same as a HelloWorld example…
Alex Jongman
  • 189
  • 10
1
vote
2 answers

Lit Element - add event listener to element inside the component

I have looked at a number of examples (eg this one) of this which don't work for me. A simple Lit component. I would like to add an event listener on the button, selected by its id. The result in the console is null - it can't find the button in the…
RGriffiths
  • 5,722
  • 18
  • 72
  • 120
1
vote
1 answer

What is this typescript error when using lit context?

I am using @lit-labs/context v0.3.3 and typescript v4.7.4 with experimentalDecorators support enabled. I have this custom element using lit context: class MyComponent extends LitElement { @consume({ context: loggedInContext }) @property({…
dbuss1
  • 500
  • 1
  • 5
  • 12
1
vote
2 answers

is it ok to use a global reference for the components that are supposed to be at most 1 in the document for setting its properties?

It's hard to get data between components if they have a bit complex structure. Yes there's a plenty of state management libraries out there. But I wonder what if all I need to do is just to set a different value for a component that I can't reach…
Vagif VALIYEV
  • 150
  • 7
1
vote
0 answers

How to import scss to a LIT(Webcomponent) in Angular

I have the following angular code, I am trying to import a scss class, but I do not know how to since on build I got an error Note there are about 50 more nested .scss calls inside this webcomponent import { CSSResultGroup, html, LitElement, …
Mjeduar
  • 67
  • 1
  • 11
1
vote
0 answers

When using Storybook.js with Lit components is there a way to have the "Show Code" display the markup for the component with the properties?

I am using Storybook 7.0 and Lit 2.0. When I click "Show Code" in a story, it only displays the tag for the component and not any of the properties that were set. Is there a way to get the "Show Code" option to display the tags and all the…
Tyler
  • 1,019
  • 12
  • 27
1
vote
0 answers

Lit Element Constructor Injection- Inject parameters in the constructor of a lit element service from client app consuming lit element)

I have created a simple lit element bundle file using rollup.config.js. This bundle file is uploaded in NetStorage. I want to inject a value from the client class (angular spa app’s component.ts file) that is consuming the CDN service and pass it to…
Pragati Prakash
  • 25
  • 4
1
vote
0 answers

HTML tag not closing when injecting Lit

My intention is to inject Lit into the md-menu tag (@material/web) as shown in the documentation:
Dmytro
  • 21
  • 4
1
vote
1 answer

Is there a way to change a slot name before rendering the element in the shadowDOM, based on which slot is used in the DOM?

I'm working on a project that has different features for desktop and mobile devices. Some of these features can be replaced by slots. I'm trying to have one slot be able to be replaced by either a desktop slot named poster-foreground, or a mobile…
Cameron Crane
  • 113
  • 1
  • 12
1
vote
0 answers

Download file button in Vaadin 23 and Lit

I'm using Vaadin 23 in Java application in Spring. I have a lit template with render method returning html like this: import {css, html, LitElement} from 'lit-element'; class DownloadButton extends LitElement { render() { return html` …
Krystian G
  • 2,842
  • 3
  • 11
  • 25
1
vote
1 answer

How to enable IntelliSense on LitElements in a .svelte file?

Using LitElements (extension of Web Components) in Svelte is a breeze : // MyView.svelte
Hello, World !
However my-lit-element…
Alex
  • 21
  • 3
1 2 3
…
21 22