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.

Filter by
Sorted by
Tagged with
0 votes
1 answer
13 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"> &...
0 votes
0 answers
22 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....
0 votes
0 answers
30 views

TypeError: Cannot read properties of undefined (reading 'navigationStart')

This error appears when multiple pages are tested by test run (vitest). Pages are built with lit.dev (web component)
  • 61
0 votes
1 answer
54 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 ...
  • 21
0 votes
1 answer
109 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
67 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,202
1 vote
0 answers
76 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
29 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
0 answers
45 views

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 ...
  • 659
0 votes
0 answers
85 views

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 &...
  • 1
0 votes
0 answers
60 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
0 votes
0 answers
46 views

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 ...
0 votes
1 answer
100 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"; @...
1 vote
1 answer
98 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 ...
  • 387
0 votes
0 answers
56 views

WebPack fails in production mode when I switched from Lit 1.0 to Lit 2.0

I am using WebPack (5.55.1) to prepare ES5 bundle for my lit-element library. Currently I am using Li 1.0 (lit-element 2.5.4) and ES5 bundling works fine. Now I am trying to migrate to Lit 3.0 and ...
  • 415
2 votes
2 answers
187 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 ...
  • 10.2k
1 vote
1 answer
191 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 ...
  • 5,111
0 votes
1 answer
272 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 ...
0 votes
1 answer
29 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,323
0 votes
1 answer
178 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,538
0 votes
0 answers
46 views

Layout/style for a repeatable child via slots

I'm trying to create a drop down control, where the user of the control knows the shape of the options/selected item and can display/style them appropraitely. I have some code that looks something ...
  • 13.6k
-1 votes
2 answers
135 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 ...
  • 902
-1 votes
1 answer
462 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 ...
0 votes
1 answer
226 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
1 vote
1 answer
2k 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
  • 13
0 votes
1 answer
308 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 ...
  • 1,977
1 vote
1 answer
509 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-...
  • 25
2 votes
2 answers
725 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 ...
  • 426
3 votes
2 answers
2k 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
361 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:...
0 votes
1 answer
587 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/ ...
0 votes
1 answer
153 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 { ...
0 votes
1 answer
2k 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,717
2 votes
1 answer
707 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 ...
0 votes
0 answers
292 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 ...
1 vote
1 answer
140 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 ...
  • 139
0 votes
1 answer
1k 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,255
2 votes
1 answer
458 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
723 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 ...
3 votes
1 answer
1k 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" ...
  • 1,575
1 vote
1 answer
380 views

Lottie player do not update the underlying animation when src attribute is changed at run time?

I was using lottie player for animated sticker on my PWA app. Now at run time when I change the src attribute of lottie player, it do not reloads a new animation. <lottie-player src=${state.url} ...
  • 1,575
2 votes
1 answer
334 views

Ignore the indent in lit-html html function, with typescript-eslint lint rule

Don't want to use eslint-disable-next-line, I'd like to ignore all the html result import { html } from 'lit-html'; render() { // This part will have ugly indent return html`<div ...
  • 1,982
3 votes
1 answer
2k views

Using Lit with Javascript and no build tools

I am building a desktop app that monitors some things and generates data about what it is monitoring. When the user wants to interact with the data the app starts a very simple web server. The server ...
  • 1,685
0 votes
1 answer
253 views

Nested HTMLElement rendered with lit-html overwrites parent's template

I have two minimal HTMLElements: an AppRoot and a SubElement. The innerHTML of the elements is generated via lit-html's render and html templating functions. AppRoot's HTML template is a div with two ...
  • 1,106
0 votes
0 answers
277 views

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?
  • 3,028
1 vote
0 answers
351 views

How to spread SVG attributes in lit-element?

Description I want to pass svg attributes like following: function svgIcon(paths: TemplateResult<2>[], props: Props) { return svg` <svg class="my-icon-svg" xmlns="http://...
  • 4,316
0 votes
2 answers
3k views

Using promise or async/await inside a lit-element web component

I have 2 components - product-overview and product-overview-item. The product-overview-item is an individual item that gets rendered inside of product-overview component every time the built-in render(...
1 vote
2 answers
1k views

Wait for customElement children to render to position them imperatively

I have a component MyWrapper which consists of flowing text on the left and a margin on the right. In the margin, there are MarginElement components that should be vertically aligned with <mark> ...
  • 387
1 vote
1 answer
328 views

tinyMCE webcomponent does not fire events with lit-html

I have implemented tinyMCE webcomponent with lit-HTML. Editor renders well, but events never fire. import { LitElement, html, css } from 'lit-element'; import '@tinymce/tinymce-webcomponent'; render()...
2 votes
1 answer
1k views

Lit-element, how to concatenate TemplateResult?

We have a custom template element that displays the header-title and we would like to extend this component to also show the header title with breadcrumbs when we have clicked on a button. Sample code:...

1
2 3 4 5