242 questions
0
votes
0
answers
89
views
Lit - Light DOM Memory Leaks
A few years ago I decided to migrate an old vanilla JS frontend to Lit as I could port the project in stages while keeping rest of code the same. Lit was mostly used for the reactivity component ...
- 2,245
0
votes
1
answer
63
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
579
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
248
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
470
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 ...
- 812
0
votes
0
answers
184
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.7k
2
votes
1
answer
526
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
636
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`
...
- 1,005
0
votes
1
answer
70
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 ...
- 19.2k
0
votes
0
answers
147
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
2
answers
2k
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
224
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,451
2
votes
0
answers
2k
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
338
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
0
votes
0
answers
221
views
Not able to register Lit component in Vue 2 class components
I have created a Lit component in typescript. It is being exported as a named export. I am not able to register it in Vue 2 class component. Here are the issues I am facing:
Issue 1:
import { ...
- 11
1
vote
1
answer
402
views
LIT-HTML still use the previous dropdown selected index when rendering a dropdown
I am using Lit-HTML ( NOT Lit-Element ) to build a html form. The form is very simple, it has 2 dropdowns: Population dropdown and Animal dropdown.
The animal dropdown options depends on the selection ...
- 9,715
0
votes
1
answer
26
views
Cannot remove rows from lit-html rendered table that was decorated using datatables.net
I have lit-html table that is using a template:
export let catalogTemplate=(dataStringifiedDates,sortTableBy,submitsearchEGFNForm,submitsearchForm)=>html`
<div class="tableLarge">
&...
1
vote
0
answers
383
views
await fixture never resolves when internal properties from firstUpdated() or updated() changes
I want to set some attributes based on the attribute/property passed to my lit web component using one of the two approaches mentioned below:
I am writing a test case to test a lit based web component....
- 130
1
vote
1
answer
2k
views
LitElement does not update when attribute changed
I have very simple Lit component with an attribute.
I can change this attribute outside and Lit component receives new value and can display it, for example in the <input> tag.
This operation ...
- 65
0
votes
1
answer
794
views
How to test event and style unsafecss in lit-html using jest and jsdom
I'm trying to create a unit test for my lit-html element using jest.
I want to check if the click event is working as expected.
To test an event that changes from active to disable when clicked.
// my-...
- 1
0
votes
1
answer
634
views
lit-element v2 clearing text fields with null properties
I have lit-element based forms that are reused for editing entities.
As an example consider a name form with the following fields
<mwc-textfield id="first-name" label="First name&...
- 2,342
1
vote
0
answers
169
views
How to add external styles to Bit dev application or components
Within bit.dev, how can we import external stylesheets into bit.dev as we have an external styleguide we would like to import into our components within bit.dev. We are only using lit-elements within ...
- 55
0
votes
0
answers
81
views
'Cannot get' + path when refreshing through liveserver
I am a JS student and have a project-like problem using page and lit-html. My task is to make a SPA through 'live server' and a server, which is initiated on my pc. I have to install page and lit-html ...
0
votes
1
answer
344
views
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 ...
- 13
1
vote
1
answer
669
views
How to apply entire string as an attribute/prop to Lit web component?
I have a basic Text Lit web component with a red color for styling as such
import { LitElement, html } from "lit";
import { customElement } from "lit/decorators.js";
@...
- 15
1
vote
1
answer
201
views
Render JSON to HTML without dynamic tags
Let's say I have a data structure like this
[{tag: 'h1', text:'lorem ipsum', attrs:{data-foo: 'bar'}},
{tag: 'blockquote', text:'dolor sit'},
{tag: 'p', text:'atmet'}]
that I want to render into ...
- 427
1
vote
2
answers
328
views
Was able to resolve modules with Polymer 3, but not with Lit Element
I have always been able to use https://github.com/nodecg/express-transform-bare-module-specifiers with Polymer 3 and browser sync. But now I am getting errors with the set up and lit element
...
- 11.1k
1
vote
1
answer
930
views
lit-html: issue w/ using change event to propagate changes back to data model
In the below code, i am looping through a list of my data model (this.panel), and generating an input box for each. I would like to propagate any changes made by the user back to the model.
to do ...
- 6,204
1
vote
1
answer
1k
views
Using classMap from lit-html interferes with lit-element
I'm trying to implement classMap from lit-html. When I install the package my application stops working saying the following: Package path ./directives/unsafe-svg is not exported from package.
This ...
- 331
1
vote
1
answer
193
views
The `live` directive is not allowed on child or event bindings
I have the following code using lit-html.
const textarea = (note) => {
return html`<textarea>
${note}
</textarea>`
}
let array = [1, 2, 3]
const rendered = () => {
return ...
- 8,970
2
votes
1
answer
855
views
How do I clear an element before rendering?
I have inherited an older project using jquery.
I am modernising the code.
In particular this $(selector).html("<h1>lol</h1>"); which as far as I understand is a full replacement ...
- 2,718
0
votes
2
answers
659
views
Convert to if/else from nested ternary in lit-html
how to write below code lit html
I am new to lit html , i try to convert the below code to if/else instead of nested ternary
render() {
return this.html`
${this.data ? this.html`<comp ...
- 962
1
vote
1
answer
2k
views
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 ...
- 484
0
votes
1
answer
346
views
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<Activity> = [];
in the parent customElement ...
- 1
3
votes
2
answers
6k
views
How to style dynamically in lit?
Good time
How to style dynamically in lit?
My main goal is to change the color of an element according to the user's input in the input element.
My code screen shoot
- 33
0
votes
1
answer
827
views
Lit - Render function not deleting/updating manual sub-content
I'm busy migrating a static js/html application to Lit. I'm finding the platform to be the most easy to migrate old static code to a framework.
However, I'm having some big issues where rendered code ...
- 2,245
1
vote
1
answer
1k
views
Custom Elements: Access the property of another element
I am using Lit Custom Elements:
I am using component A in my component B and want to access the property letters of B (from child to parent element). How do I do that?
// Component A
@customElement('a-...
- 35
2
votes
2
answers
2k
views
Lit components do not automatically request an update on property change (problem only in my storybook)
This is really odd: I'm using lit in a storybook (using @storybook/html).
I do not know why, but in my environment lit does not update the component automatically when a property has been changed. If ...
- 916
6
votes
2
answers
6k
views
Render lit / lit-html TemplateResult as string
In lit/lit-html/lit-element, a standard component is the TemplateResult (usually HTMLTemplateResult), created like:
function renderMe(msg) {
return html`<div>Hello ${msg}!</div>`;
}
...
0
votes
1
answer
938
views
lit: how to apply style to nested template?
There is a lit element container-element which has has nested lit elements gmail-item.
How do you apply styles to nested elements so that the last gmail-item has border-none?
Currently, the styling li:...
- 173
1
vote
1
answer
1k
views
Lit: nested template doesn't render
I have a really simple template and a simple nested template. Unfortunately, my nested template doesn't render anything.
I followed the example defined at: https://lit.dev/docs/components/rendering/
...
- 173
0
votes
1
answer
501
views
Style :host in Lit component overrides style :host in mixin
When a lit component extends a mixin, style in component overrides style in mixin.
Example:
my-component.js
export class HomePage extends ViewMixin(LitElement) {
static styles = css`
:host {
...
- 195
2
votes
1
answer
5k
views
Configure Prettier to avoid replacing quotes
Background
I have tried several keywords but was not able to find a solution to disable prettier's quotes modification.
I am working on a Polymer Lit project and I have tried a lot of things but it is ...
- 1,885
2
votes
1
answer
1k
views
Lit reactive controllers fail to requestUpdate in nested components
I want to create a basic state management using Lit reactive controllers.
The purpose is to share property values accross the application.
The issue occurs when a controller is attached to a view and ...
- 195
0
votes
0
answers
560
views
Lit element css grid
I'm implementing a (lit-element) webcomponent that has a css-grid that's specific per instance of the element. For now I set the grid-template property by the style attribute of the element, but as ...
- 147
1
vote
1
answer
247
views
lit-html: How to render back
Im trying to have a menu multiple options rendered onclick but also the possibility to get back to the menu with back button.
I'm doing something wrong or it is just not possible and I might not have ...
- 229
2
votes
1
answer
4k
views
LitElement doesn't update child component from parent component
I don't understand the concept of reactivity in lit's web components architecture. From other frameworks I come up with the assumption that the following example would update without problem, but it ...
- 4,795
2
votes
1
answer
882
views
Version conflict - Uncaught DOMException, the name "mwc-icon" has already been used with this registry. Custom Component
I'm trying to use Material Custom Component and also using some other components. But I have version conflict Uncaught DOMException.
Uncaught DOMException: Failed to execute 'define' on '...
- 61
0
votes
1
answer
2k
views
Lit-Element Not Resizing on Window Resize
I have a canvas element that should be resizing as the window resizes, but for some reason it doesn't change. The element should remain a square, taking up 80% of the view height.
The relevant css ...
- 384
4
votes
1
answer
2k
views
lit-html : is there a way to force re-render of a template?
I have been using as lit-html in my own custom web-component library.
I have third party webcompobent :
html`<lottie-player src=${state.url} background="transparent" speed="1" ...
- 2,043