398 questions
3
votes
1
answer
97
views
CSS variables for custom component in a slot
I have a custom component which is using another component within it but slotted. The component is set up like this:
<div class="nys-modal">
<!-- rest of component -->
<...
0
votes
1
answer
301
views
Undefined CSS custom properties when using UnoCSS Wind4 with Lit components
I've setup a prototype demo project using Lit to build web components. I'm using unocss with the wind4 TailwindCSS-preset. I am having trouble understanding why so many CSS custom properties are ...
- 3
0
votes
0
answers
56
views
What is @csspart comment annotation for?
If we scaffold out a new vite lit project with npm init vite@latest the comment on my-element contains @csspart:
/**
* An example element.
*
* @slot - This element has a slot
* @csspart button - ...
- 48.2k
-1
votes
1
answer
42
views
What does the lit element checksize script do?
Lit Element has a typescript starter project that has a package.json checksize script and it looks like this.
"checksize": "rollup -c ; cat my-element.bundled.js | gzip -9 | wc -c ; rm ...
- 48.2k
0
votes
0
answers
85
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
1
vote
1
answer
59
views
Set all the properties of a WebComponent element from a Json using an interface
I have a Card component and a Cards component. The Cards component groups a list of Card components that it obtains through an API. The problem is that I cannot fill all the properties of the Card ...
- 379
0
votes
1
answer
62
views
fetch call render update lit webcomponent
I tried below to make fetch call and render data , I can see fetch call happening and data coming back in network tab , but never see dom updated.
import { html, unsafeCSS, nothing, css } from '...
- 1,217
0
votes
1
answer
236
views
How can I avoid cumulative layout shifts in Lit?
I have a Lit project and Chrome's Lighthouse shows very high cumulative layout shift (CLS). I assume the problem arises due to the fact that component's CSS loads with JS files and cannot (?) be ...
- 1
1
vote
1
answer
65
views
How do I use a property for the value of an <input>?
I'd like a reactive property to be "bound" to the value of an <input> element. I can achieve this using various approaches, such as using @change(...), but I wonder if there is a more ...
- 1,563
0
votes
1
answer
66
views
Passing Web Component Slots to a Parent
I'm trying to get back into web components with lit and I'm having trouble with slots. I've made a sample button where I can add an icon to the start or end of the label with slot names like so:
<...
- 642
0
votes
1
answer
159
views
JavaScript Fullscreen: fullscreenEnabled is always false and fullscreenElement is not the element requested on
There is a [Lit] WebComponent that I call requestFullscreen() on (this.requestFullscreen()). It's a toggle, so when the same action is clicked again I check for if (document.fullscreenElement === this)...
- 10.1k
1
vote
2
answers
360
views
Chrome crashes without any errors when I open a web page made with web components
Chrome crashes when I open a webpage written with Web Components.
It started happening with version 128.0.6613.113. I have the latest version installed:
128.0.6613.120, even with this version chrome ...
0
votes
2
answers
460
views
When do we need to use a dot prefix when doing lit template attribute property assignments for html elements?
The lit documentation has the following example showing how to set attribute values:
<!-- attribute values -->
<div label=${label}></div>
<button ?disabled=${isDisabled}>Click ...
- 48.2k
0
votes
2
answers
198
views
Conditional Web Component Slot Container Based on Slotted Content
Given a web component extending LitElement:
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
@customElement('my-element')
export class MyElement extends ...
- 3,102
1
vote
3
answers
1k
views
How to manually set focus on element in a shadow DOM (Lit Web Component)
I'm building a select/dropdown component as a Lit web component. To have consistent styling, this is NOT using a native select. I'm using divs and adding logic to have them appear when and where ...
- 1,752
0
votes
1
answer
391
views
How to bind keyboard events in Template of Lit Web Component
I have a Lit web component that contains a button with a click event. Simplified, it looks like this:
<button @click=${props.onClick}>
<!-- button content -->
</button>
The ...
- 1,752
0
votes
1
answer
325
views
Can we have "computed" properties in Lit web components?
Vue.js has a feature called Computed Properties. These are properties (values) that are recomputed whenever their reactive dependencies change. They are useful for simplifying code and for caching ...
- 49.9k
0
votes
1
answer
104
views
Why does this <input>'s @focus event listener set the state properly only once?
Lit Playground link. Code copied below:
import {html, LitElement} from 'lit';
import {customElement, state} from 'lit/decorators.js';
@customElement('simple-greeting')
export class SimpleGreeting ...
- 78
0
votes
1
answer
187
views
Can we use Jest with @web/test-runner to use features like spying and mocking?
I'm currently developing web components with Lit and using @web/test-runner along with @open-wc/testing for writing unit tests. According to the documentation on Test Frameworks: Write Your Own, is ...
-1
votes
1
answer
215
views
Using the unpkg CDN to serve the Lit 3.0 my-element demo
With Lit 2.0 we could publish a web component to npm and use it via a script tag like this one.
<script src="https://unpkg.com/@fireflysemantics/fs-gist"></script>
That ...
- 48.2k
0
votes
1
answer
46
views
How use js object in css method
I'm trying to use js objects like CSSType, in css method to apply style into compontent, converting object to string, but the method don't accept use something like css${style}. Someone know a way to ...
- 1
0
votes
1
answer
246
views
How to execute a script after the component load in Lit-Element
I'm trying to add a prefix to the phone number input after the component load, but I'm getting an error. In a normal web component, the connectedCallback() method would be enough but here it doesn't ...
- 128
4
votes
0
answers
630
views
Web Test Runner setup issue - keep getting TypeError
I am trying to set up the testing environment for my Vite Lit.js project. I have installed WTR with esBuild plugin to handle typescript. When I run my tests I keep gettin the error below.
🚧 Browser ...
- 123
0
votes
1
answer
1k
views
can lit elements also be used without shadow dom - are there any risks?
we need web components and use lit elements in our web application. however, the dom shadows cause problems not only in the css area (access not possible, no global css sheet).
what is the biggest ...
- 40
1
vote
0
answers
270
views
How to render a Lit element component in a Nuxt 3 project?
I'm encountering difficulties when integrating Lit elements into a Nuxt project, particularly with server-side rendering (SSR). My Lit component renders correctly when the site is rendered client-side ...
- 436