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

Lit-html select component event handlers

I am using a library called lit to create custom web components and i have tried using the @change and @select event handlers to display another component with no luck. I also can't seem to find the info on the docs. My code looks like this : return…
CKW
  • 51
  • 5
0
votes
1 answer

Open Web Components Testing / Lit - component not being rendered?

I'm trying to test my Lit components with @open-wc/testing. Lit has an example repo here, with this test: https://github.com/lit/lit-element-starter-ts/blob/main/src/test/my-element_test.ts#L44 When I try to render my element like they do in their…
Michael Rivera
  • 193
  • 1
  • 7
0
votes
0 answers

Button doesn't work inside vaadin-grid (javascript)

I have a button in a vaadin grid that I want to open a link in a new tab, but it doesn't work inside the grid. I tested the code outside the grid, and it worked there. Everything is done using Lit. Here's part of the code:
0
votes
1 answer

ifDefined is not working in the litElement

The main page export class GdwcHeading extends LitElement { static get properties() { return { /** * Heading size */ size: { type: String }, /** * Heading level */ level: { type: String }, }; } render() { const styles = {…
0
votes
1 answer

problem on lit with the routing (window.location)

good morning. I'm using lit-element and I'm trying to implement the function: window.location.href = "/component but it doesn't work, it takes me to a page that says: not found I'm using vaadin router Any idea? thanks complete code if…
enericode
  • 13
  • 4
0
votes
1 answer

HTML doesn't update properly on child element after sorting an array of items on parent component when using updated()

I am sorting an array of so called 'activities' in my customElement using LitElement: @property({ type: Array }) private activityListLocal: Array = []; in the parent customElement called "find-activity". Each activity is being…
Keayne
  • 1
  • 2
0
votes
1 answer

Value not emitting from child to parent component using custom events

I have a problem with two web components created using lit-element v3.2.0 and I'm using custom events to emit the input value from the child component up to the parent component. The form-input component is a reusable input that extracts the input…
0
votes
1 answer

Questions about the ReactiveController pattern promoted and used by Lit

Please find below three different ways of implementing some ReactiveController with Lit. A typical ReactiveController implementation with Lit looks like Pattern 1. Please be aware that in Pattern 2 and Pattern 3 there's no implements…
Natasha
  • 516
  • 7
  • 24
0
votes
1 answer

What is the difference between value=${"Hello"} and .value=${"Hello"} syntax in Lit

I'm reading the Lit docs, and found that: https://lit.dev/docs/templates/expressions/#property-expressions html``; Testing: I removed the dot before "value" word and nothing changed. Why I need to add this dot ?
coheia
  • 18
  • 2
0
votes
1 answer

In LitElement, how do I refresh external data in a child-component?

I have a child-component which takes a property (group). The child-component uses this property as an argument in a URL for fetching external data which it then renders as a list. The problem is, the child-component completes the render before fetch…
john
  • 5
  • 1
  • 4
0
votes
1 answer

How to get the tagname of a custom element from the outside (or even inside)?

My current approach: Custom Element: @customElement("bb-flow-identification") export class FlowIdentification extends LitElement { /*...*/ } Other location: import { FlowIdentification } from "./flow-identification"; // The following yields the…
codepleb
  • 10,086
  • 14
  • 69
  • 111
0
votes
1 answer

Removing nodes from tree view built with Lit

I'm trying to build an interactive tree-like component using Lit, and I'm running into some issues when trying to remove tree nodes. Here's the implementation of the component: import { html, LitElement } from…
Petr Broz
  • 8,891
  • 2
  • 15
  • 24
0
votes
1 answer

Highchart stockChart Installation in Web Component

I would like to install and use the normal highcharts plugin inside the web components. Is there a way to create instances and using this instance using higcharts methods and events.
SCX
  • 1
  • 1
0
votes
0 answers

VSCODE: Can't get even the most basic program to run in lit with javascript

After much troubleshooting I decided to try to get the most basic of programs to run in lit, and have not have much luck. Here are my steps: I installed lit into the same directory as my index.html and app.js using npm i lit. I generated my…
Cameron Crane
  • 113
  • 1
  • 12
0
votes
0 answers

LitElement in Angular 8 - error TS1005: ';' expected. TS1128: Declaration or statement expected

i am trying to use a litElement Webcomponent inside an Angular 8 Webapplication. I think i followed all instructions correctly to integrate a webcomponent inside an Angular project as everything is fine in newer Webapps using Angular Version > 12…
Icecraft
  • 1
  • 1