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

How to import Lit runtime only once and not for all components

I am developing a component library in Lit (https://lit.dev) and I am wondering how to avoid bundling the full lit runtime for each component. Any hint?
ciaoben
  • 3,138
  • 4
  • 27
  • 42
0
votes
1 answer

Method of low-level encryption of section of website

I'm looking for a simple method of encrypting a small portion of my personal developer website. I'd like to display my resume directly on the site, but would prefer to protect it with a password so as to prevent those who are not potential employers…
daxicks
  • 108
  • 2
  • 7
0
votes
1 answer

Lit / LitElement ReactiveElement static properties

Lit uses this reactive element class, which each of my web components extends. I can't quite get my head around why static properties such as elementProperties are NOT the same on all web components that extend the Lit base class. See example…
Matt
  • 459
  • 5
  • 12
0
votes
1 answer

Form validation for custom elements in Lit and Typescript

I am making some custom web controls in typescript and lit such as submit buttons and inputs and when I try to wrap them in a form in my html, the inputs cannot be seen by the form and the submit button does not try and submit the form. Another UI…
TehYoshi
  • 133
  • 6
0
votes
1 answer

LitElement object property is null

I have a component which takes an object as a property, but for some reason when rendering this.item is undefined. @property({type: Object}) item?: { family: {iconUrl: string; name: string}; } | null; static get styles(): CSSResult[] { …
James Ives
  • 3,177
  • 3
  • 30
  • 63
0
votes
1 answer

Web components community polymer web components

If I look at the polymer shop I am instantly sold on wanting to use this as a starter for my web shop. Not just because it's already a web shop (full pwa technology) but because it has excellent (offline) experience on browser/mobile, has proper…
HMR
  • 37,593
  • 24
  • 91
  • 160
0
votes
1 answer

child property from parent Promise

I want to create a navigation component for my project. The shell fetches a json with chapter info, these are passed to nav-element, which recursively calls itself to render the navigation tree. shell.js import { LitElement, html, css } from…
-1
votes
1 answer

HTML Table with 4 columns, outer columns are wider?

I have a html table with 4 columns, but for some reason the outer columns are wider than the inner ones. This causes the images in the header to be different sizes and it looks odd. Is there any way to force all columns to be exactly the same width,…
Noob
  • 754
  • 3
  • 10
  • 27
-1
votes
1 answer

Suggest a way to make lit-element reactive properties work with ecma 2022 private fields

Recently we got a new ECMA 2022 standard approved and there is now a syntax to support private fields natively by prefixing # to the name. For years we have been using _ conventionally and now there is some space for confusion of # and _. The…
Max Larionov
  • 420
  • 6
  • 19
-1
votes
1 answer

In Laflet map, When click outside of the map, how to close opend popup

I am developing cms widgets using lit-element and it contains leaflet maps. we open popups inside the map when we click on the marker. and close them inside the map. But the problem is how to close those opened leaflet marker popups when click…
Rishni Meemeduma
  • 324
  • 3
  • 14
-1
votes
1 answer

Apply CSS class to the body when opening a menu

I'm currently working on a web project using LitElement, and I have a menu that shows when I click the hamburguer button, and closes when I click the close button or navigate to other page. My problem is that I want to apply the CSS property…
-2
votes
1 answer

TypeScript Cannot assign to read only property

I'm trying to implement app state management with litState for a TypeScript project but get an error when I try to use the counter state in the component Cannot assign to read only property 'counter' of object '#' at new DemoState…
habibg
  • 185
  • 3
  • 15
-2
votes
1 answer

lit web component localization using lit-translate

I am using lit-localization(https://www.npmjs.com/package/lit-translate) to change component language. But all documentations and demos are using typescript. If anyone have done web component localization using lit-translate, please share it how…
Rishni Meemeduma
  • 324
  • 3
  • 14
1 2 3
21
22