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

How to create LitElement without Shadow DOM?

I am creating a web components using LitElement. This is from https://lit-element.polymer-project.org/guide/start // Import the LitElement base class and html helper function import { LitElement, html } from 'lit-element'; // Extend the LitElement…
user7331530
  • 815
  • 1
  • 12
  • 21
15
votes
2 answers

What is the difference between lit-element & lit-html?

I have been learning Polymer and this came in - The future of web (lit-element & lit-html) I understood that lit-html is for HTML templating with a couple of efficient techniques. At the same time lit-element is a lightweight web component base…
Hitesh Misro
  • 3,397
  • 1
  • 21
  • 50
10
votes
3 answers

shadowRoot.getSelection()?

I have a rich editor I'm re-writing as a lit-element custom element. I'm using Firefox (latest) for testing. I'm trying to get the selection for the content editable element in the custom element's shadowDom (in a method). In the Firefox debugger),…
SteveB
  • 851
  • 2
  • 7
  • 15
10
votes
5 answers

React-like refs in lit-html / lit-element?

Does lit-html have by any change something like React's ref feature? For example in the following pseudo-code inputRef would be a callback function or an object { current: ... } where lit-html could pass/set the HTMLElement instance of the input…
Natasha
  • 516
  • 7
  • 24
8
votes
1 answer

Get raw string value by import with vite

I want to get raw string of css in npm module through vite. According to vite manual, https://vitejs.dev/guide/assets.html#importing-asset-as-string It says we can get raw string by putting "?raw" at the end of identifier. So I try this: import…
kochizufan
  • 2,120
  • 2
  • 30
  • 50
5
votes
1 answer

Dynamic HTML using a Vaadin LitRenderer

Using Vaadin 22+ I'm trying to display some dynamic html in a Vaadin Grid, using a LitRenderer. This could previously be achieved using the now-deprecated TemplateRenderer using this hack var templateRenderer = TemplateRenderer.of("""
…
Brandon
  • 121
  • 6
5
votes
1 answer

How to access the location.params of the vaadin-router using lit?

According to the documentation and demos provided by Vaadin the route parameters should be bound to the location.params. The examples provided are using polymer, and when I use LitElement the location.params is undefined. Is there a trick other than…
Alex Jongman
  • 189
  • 10
5
votes
1 answer

How to lazy load items in vaadin grid in LitElement

I have a requirement to render infinite scrollable data in an optimal way in LitElement. Vaadin-grid seems suitable for the use-case. However, the data is huge. So I am trying to lazy load the data in chunks from backend. This backend api supports…
Shruti Nath
  • 53
  • 4
4
votes
1 answer

Vaadin 23, converting inline Polymer template for grid columns renderes "NaN" instead of values

I am trying to convert some inline polymer templates for grid columns, and the rendered value in the browser ends up as “NaN” for some reason. So I simplified the template to reproduce the issue as the…
STaefi
  • 4,297
  • 1
  • 25
  • 43
4
votes
2 answers

How to group the css selectors

:host([aspect-ratio='square']) img { aspect-ratio: var(--ratio-square); } :host([aspect-ratio='landscape']) img { aspect-ratio: var(--ratio-landscape); } :host([aspect-ratio='portrait']) img { aspect-ratio:…
Vairamuthu M
  • 53
  • 5
4
votes
2 answers

Undefined property testing Lit typescript web component

I recently converted a lit web component over to Typescript and can't seem to figure out why my tests are failing now.. everything was working fine before the conversion. These are my dependencies for testing: "@open-wc/testing":…
Shawn
  • 2,355
  • 14
  • 48
  • 98
4
votes
0 answers

SyntaxError: Invalid or unexpected token in Visual Studio Code while using Lit

Sadly I'm aware this question has been asked before, but I've tried the solutions here to no avail: Uncaught SyntaxError: Invalid or unexpected token in code I've reinstalled node.js, reinstalled lit.dev using npm, and reinstalled Visual Studio Code…
Cameron Crane
  • 113
  • 1
  • 12
4
votes
1 answer

Unable to use Web Components in React

I'm trying to use some web components inside a React application. However, React is not able to detect the web component tags. import React from "react"; import "./App.css"; import "@vaadin/vaadin-button"; import…
Chandra Eskay
  • 2,163
  • 9
  • 38
  • 58
4
votes
1 answer

Passing standard JavaScript event with composed=false through Shadow DOM

I have a custom lit web component that contains an element inside its Shadow DOM. I want to react to the change event fired by the input outside the custom element, but the change event has by default composed: false, so the event doesn't…
ollitietavainen
  • 3,900
  • 13
  • 30
3
votes
1 answer

Pass a boolean value to a Lit Component

I want to pass a boolean value (true/false) to a lit component via. the dom. I'm having issues because it is always converted to true, I cant seem to find a good example for this in the lit documentation. So basically:
gries
  • 1,135
  • 6
  • 29
1
2 3
…
21 22