Questions tagged [lit-element]
A base class for creating custom elements with the Lit JS library.
lit-element
690
questions
0
votes
0
answers
15
views
onClick event not being handled/fired while testing - Custom component with Lit Element using React Wrapper
I have this below component that is a Header Component with an AccessBar and an Icon Component with certain props. All the custom components are actually Lit Element components (uses shadowDOM) from a ...
0
votes
1
answer
39
views
Web Component not rendering when loaded from UNPKG CDN?
I'm trying to render a web component in Stackblitz using the UNPKG CDN.
This is the script element that should load it:
<script src="https://unpkg.com/fspubtest1234"></script>
...
- 45.4k
-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
33
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
53
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 ...
- 126
1
vote
0
answers
48
views
Configuring external style sheets to be used with lit element?
I'd like to provide a way for clients of a syntax highlighting web component to specify usage of an external syntax highlighting stylesheet.
For example this demo uses the render function to inline ...
- 45.4k
0
votes
0
answers
25
views
Excluding a file from the vite lit element typescript build?
In this lit element stackblitz demo the compilation produces an error saying that a script could not be loaded.
This is OK since the element that the script is pasted within is going to syntax ...
- 45.4k
2
votes
2
answers
72
views
The preferred way to place content inside a custom element as an input to the component?
I'm trying to develop a syntax highlighting web component and it will take content placed inside it and syntax highlight it. So something like this:
<fs-highlight data-line-numbers="true"...
- 45.4k
0
votes
1
answer
31
views
Rendering an escaped string with lit element?
This demo first highlights html contained inside the fs-highlight element and assigns the result to the _code property.
The render method then renders the template with the _code highlighted html ...
- 45.4k
0
votes
0
answers
82
views
Observing if a script has loaded using a MutationObserver?
In this Lit Element demo I'm trying to check whether a script element has loaded with a callback like this (It's not correct and I'll also explain why).
connectedCallback() {
super....
- 45.4k
1
vote
0
answers
34
views
How to reference highlighter.js within lit element?
How do we use highlight.js inside a lit element web component if we are importing highlight.js in a index.html file.
So for example in the head element of index.html we may have this:
<link
...
- 45.4k
0
votes
1
answer
39
views
Binding data attributes with lit element?
How do we map a property to an attribute when using data-attributes with lit element?
For example suppose we have a property like this:
@property({ type : String }) language = 'xml';
And it's set ...
- 45.4k
0
votes
0
answers
150
views
Decorators not working in Lit Elements - building using Babel and Parceljs
I'm trying to build a Custom Web Components library using Lit Elements, Parcel and Babel. If I don't use decorators and fallback to static properties approach, things are working - however I'm facing ...
- 99
-2
votes
1
answer
112
views
Can non data- attributes on custom elements become standard attributes?
In this article the author suggests using data- attributes in the design of a syntax highlighting web component.
The reason given is:
Technically speaking, the browser would let us write the ...
- 45.4k
0
votes
1
answer
119
views
Trouble Syncing Checkbox State Between LitElement Property and DOM Attribute
Problem Description:
I'm using LitElement to create a controlled checkbox component. I'm facing an issue with synchronizing the checked attribute of the checkbox in the DOM with the checked property ...
