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

How to import highcharts-border-radius plugin in LitElement web component?

Created a web component using LitElement and created a columnrange chart using highcharts in that, now I want to add the border radius only to the top left and top right corners of the bar, and for that, I installed highcharts-border-radius external…
0
votes
1 answer

Why are conditional events in Lit not working?

The following code renders with no event handlers attached. I've verified that this.evchange and/or this.evinput are true. The events work if I set them up more verbosely. But from reading the Conditionals section in the docs, this should…
GreginNS
  • 161
  • 2
  • 7
0
votes
1 answer

LitElement EventListener() not update render() function

I have two Lit components that are at the same level but when the first component sends data to the second component using a dispatchEvent, the second component's render method is not updated. html file
0
votes
0 answers

QrScanner video element don't shown in lit-element

When i'm using qrScanner in lit-element i see below warning in console. QrScanner has overwritten the video hiding style to avoid Safari stopping the playback. I test this on firefox and chrome in linux and android. Also any suggestion for good…
sahama
  • 669
  • 8
  • 16
0
votes
0 answers

Lit Web Component function not firing from parent in Chrome Extension

I am dynamically injecting a lit web component into the content script of a Chrome Extension. The component renders, but I'm unable to call a function within the component from the parent page that works outwith the extension environment (but not…
Colin Brown
  • 589
  • 1
  • 8
  • 15
0
votes
0 answers

How can I embed Twig in Lit?

I use the PHP templating engine Twig and I want to use Lit to provide a structure to implement certain interactive elements. Is/How it possible to include a Twig template in a Lit template to reuse existing twig components there?
DasElias
  • 569
  • 8
  • 19
0
votes
0 answers

about Lit Reactify. props . @lit-labs/react

when I have a web component called Test ,and its props is TestProps ,when I use createComponent (@lit-labs/react) ,I want to give this function TestProps that I need let others who uses "Test " know what kind of argument that "Test" can…
woho
  • 1
0
votes
1 answer

Why is my nested web component adding vertical space in Lit?

I have a weird issue where when I add padding-left: 32px to an element, vertical space gets added. If the CSS says 0, and I add the space manually in Chrome debugger, the vertical space isn't there. This is only happening with nested components. I'm…
Dave Stein
  • 8,653
  • 13
  • 56
  • 104
0
votes
1 answer

Change button background-color when button is clicked with lit components styleMap

I toggle between components on button click and I want to show active button when the user has clicked on a button. So backgroundColor of a clicked button should be green, but now when I click on one of the buttons, both buttons became green. How…
tech27
  • 67
  • 7
0
votes
1 answer

deleting an item from custom component (mb-bubbles) don't deletes item in items passed as property

My custom element is called "mb-bubbles". It represent a list of things. Each of these things must have at least the attributes "id" (Number) and "text" (String). If the component have the attribute "editable", you should be able to remove items…
Pedro Urday
  • 93
  • 2
  • 5
0
votes
1 answer

Why doesn't TS know I am using @property from Lit?

I have the most basic Lit code like this: import { property } from 'lit/decorators.js'; export class MyClass extends LitElement { @property() rows = []; } Outside of this sample, rows has data. My code renders as expected. However TS complains…
Dave Stein
  • 8,653
  • 13
  • 56
  • 104
0
votes
1 answer

Storybook - LitHtml svg rendering doesn't seem to work with symbol files

I am currently setting up a storybook project. One aspect of it, is showing the various icons we have as a part of the style guide. I am using svg-sprite to create a JSON file of all the svg's we have (along with the svg symbols sprite) so that I…
OzerU
  • 13
  • 4
0
votes
0 answers

How to add routes in lit with @lit-labs/router?

I'm new to lit and JavaScript, but a few days ago, I was reading through the documentation and came across @lit-labs/router. The truth is, I wanted to try it to continue learning, but reading the little documentation that there is about…
0
votes
0 answers

Render a custom component in Angular and Init it when variable is updated

I have a custom WebComponent that I want to include in my project. The problem is that this component requires a certain ID to work properly, which is available in the route parameter. The idea behind this that I need my component to be initialized…
Alex_K
  • 11
  • 2
0
votes
2 answers

how to add an event listener in connectCallback

I want to wait until elements are rendered in the dom to dispatch an event. I have a lit element that is wrapped around a react element. In the connectedCallback I have the following connectedCallback() { super.connectedCallback(); …
Chris Hansen
  • 7,813
  • 15
  • 81
  • 165