Questions tagged [lit-html]
Lit is a JS web component library. Lit HTML is the render component that uses tagged template literals to only update the parts of the DOM that have changed. Use this tag on questions related to using it standalone, and in components other than those based on LitElement.
lit-html
243
questions
0
votes
0
answers
34
views
lit-html autocomplete in a NX monorepo
I'm trying to setup a NX monorepo with packages and apps. The libs in packages will be web-components written using Lit.
My setup builds and runs just fine, but I'm struggling to get autocompletion ...
- 79
0
votes
0
answers
9
views
Many errors in the colsole /browser/ after using lit-html cdns
I hosted my web site in Github Pages using lit-html (no lit element) from its cdns.
import { html, render } from '//unpkg.com/lit-html?module';
import { until } from '//unpkg.com/lit-html/directives/...
0
votes
1
answer
34
views
lit-html not updating radio button
I have that Quiz Editor - https://quiz-land.github.io/edit/XSZ5weNxLN.
Link to the specific part of the code where the problems occur - https://github.com/.../main/src/views/editor.js/answers.js.
When ...
0
votes
1
answer
121
views
LitHTML input type range - value binding doesn't work as expected
I have an implementation I am trying to do with inputs which have the type range. These will be 2 inputs of type range, and I'm trying to get a 'double range' kind of implementation out of this. I am ...
- 13
0
votes
2
answers
119
views
Can a Lit element go in the <head> tag?
I'd like to make an SEO lit component where I can pass data to fill in meta tags, etc so I don't need to repeat them on every index page. If I place my component like so...
<head>
<script ...
- 28
0
votes
0
answers
139
views
Seeking insight on performance discrepancy between React and LitElement components
I've been conducting performance profiling to compare the rendering efficiency of React and LitElement, specifically focusing on a button component. However, the results are surprising, as LitElement ...
- 754
0
votes
0
answers
64
views
lit.dev typescript error 'TemplateResult' is not generic
I am using [email protected]
When building my typescript component it adds this as the my-component.d.ts:
render(): import("lit-html").TemplateResult<1> | undefined;
Problem is that this ...
- 20.3k
2
votes
1
answer
100
views
Why my Base64 encoded image could not show properly in img tag?
I'm trying to use base64 to show an image, BUT it only shows the encoded string but not the image.
I copied it to a new file, and it showed correctly.
This is the code:
@customElement('image-board')
...
- 21
0
votes
1
answer
251
views
How to use chart.js with lit-html
I am using render() to create and render using lit-html
import { html, render } from 'lit-html';
const templateItems = [];
const getChartInfo = (locationToRender) => {
templateItems.push(html`
...
- 915
0
votes
1
answer
30
views
Access parts within AsyncDirective after setValue call
Is there any way for an AsyncDirective to access its rendered parts after a setValue call?
My directive's update method calls super.update which triggers the render method, but I need a method that's ...
- 18.8k
0
votes
0
answers
74
views
Lit JS - Issue with event.target in document.addEventListener
If i am using document listener anywhere in Lit Js and try to console event.target then it is printing only current element object instead of element which user has clicked.
connectedCallback() {
...
- 61
1
vote
1
answer
1k
views
How to import react component in lit component?
I Have React component. Now i am trying to import React Component in Lit Component. But React component is either not getting rendered nor it is throwing any error in the console. Is there any way to ...
- 61
0
votes
1
answer
150
views
Data binding from slots?
I've been working with Lit and recently I got into a weird issue where I couldn't get the property change detection in updated lifecycle callback when the property value (in this case: myProperty) is ...
- 3,431
2
votes
0
answers
923
views
How to implement lazy loading in Lit (Web Components)
I want to create a reusable web components library made with Lit. These elements will be used with React, Angular, Vue and other framework as well. Now there is a problem, I am bundling these ...
- 41
0
votes
2
answers
197
views
It it possible to control a fluid animation in Lit Virtualizer
I am implementing a Infinte Scroll Carousel with Lit.
I want to control the carousel with key events.
On long key press (or throttled) I want the animation te be fluid and stop at a specific place.
Is ...
- 1