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.
397
questions
0
votes
0
answers
13
views
Tracking signal changes with effect() in web components made with Lit
I'm building an audio streaming web app, with the use of some web-components created with Lit and signals (through the library preact-signals) for global state management.
Here is how it works :
In a ...
- 269
0
votes
2
answers
31
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,012
0
votes
0
answers
21
views
provide to a context based on consumed property in lit
Lit Playground Example
As showed in my lit playground example, I want to pass a consumed context to provide a new context. But at the time of defining other properties, the consumed property is ...
- 324
0
votes
0
answers
16
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,569
0
votes
1
answer
29
views
How to style elements in shadow root?
I have the following html
<tag>
#shadow-root
<slot name="avatar"></slot>
<span class="label"><spot></spot></slot>
Test
</...
- 1,767
0
votes
0
answers
14
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,569
-1
votes
1
answer
47
views
Catching errors with the lint:eslint script in the lit typescript starter project?
I'm testing the lint:eslint script in the lit element typescript starter project.
I added a property with undefined any like this below the name property:
/**
* The name to say "Hello" ...
- 45.4k
0
votes
1
answer
32
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 ...
- 48.7k
0
votes
1
answer
43
views
Implementing attributeChangedCallback in Typescript?
In this tutorial attributeChangedCallback is implemented like this:
// attribute change
attributeChangedCallback(property, oldValue, newValue) {
if (oldValue === newValue) return;
this[ property ]...
- 45.4k
0
votes
0
answers
25
views
Lit Code Highligher: Slot content not visible in firstUpdated() function
Below is the Lit Element I'm trying to make to display a codeblock with Prism.js code highlighting. For some reason the slot content is not showing up in the firstUpdated() function when I query the #...
- 105
0
votes
1
answer
40
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 ...
- 76
0
votes
0
answers
35
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
57
views
Highlight js import not working in lit components (es / eslint issue)
Have this piece of code in a lit component;
import {LitElement, html, property, CSSResultArray, TemplateResult, unsafeCSS} from 'lit-element';
import { customElement, query } from 'lit/decorators.js';
...
0
votes
1
answer
38
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 ...
0
votes
0
answers
51
views
Lit Web Component "object" properties are not visible in storybook "show code" code snippet
I have a requirement to develop web component library using Lit which will be used in multiple projects. In that library, one of the web component I required to develop is Chart web component. This ...
- 945