Stack Overflow
Stack Overflow

Questions tagged [lit-element]

A base class for creating custom elements with the Lit JS library.

LitElement makes it easy to define web components using /Lit. LitElement allows you to declare reactive properties that re-render the component and reflect to attributes.

It uses to render DOM.

677 questions
34
votes
1 answer

How to create LitElement without Shadow DOM?

I am creating a web components using LitElement. This is from https://lit-element.polymer-project.org/guide/start // Import the LitElement base class and html helper function import { LitElement, html } from 'lit-element'; // Extend the LitElement…
user7331530
  • 815
  • 1
  • 12
  • 21
29
votes
4 answers

Relative references must start with either "/", "./", or "../"

I am newbie to lit-element, and when use import to include the library, I am getting error as: Uncaught TypeError: Failed to resolve module specifier "lit-element". Relative references must start with either "/", "./", or "../". Please provide…
Senthil
  • 961
  • 1
  • 8
  • 21
24
votes
1 answer

Main differences between lit-element Web Components & React

Looking into React code it seems more similar to "Lit-Element" code, Both can be used to create web components. It is very helpful if someone can explain the main differences between the "React" and "Lit-element"?
Rayan Aradha
  • 500
  • 1
  • 4
  • 13
15
votes
2 answers

What is the difference between lit-element & lit-html?

I have been learning Polymer and this came in - The future of web (lit-element & lit-html) I understood that lit-html is for HTML templating with a couple of efficient techniques. At the same time lit-element is a lightweight web component base…
Hitesh Misro
  • 3,397
  • 1
  • 21
  • 50
15
votes
2 answers

Can I use ES Modules library from CDN?

I want to use this library via CDN. https://www.jsdelivr.com/package/npm/lit-element My js code is here. import { LitElement, html } from "https://cdn.jsdelivr.net/npm/lit-element@2.1.0/lit-element.js"; class MyElement extends LitElement { …
blz
  • 837
  • 7
  • 20
14
votes
4 answers

is there a state management solution for lit-element?

If there is a list which should be rendered from an array, and the array will be passed from the grand-grand-grand-grand-grand-parent custom element. That will be super annoying. Is there a global state management solution for lit-element, just like…
zzzgoo
  • 1,974
  • 2
  • 17
  • 34
13
votes
1 answer

How to test Web Component (lit-element) with jest

Anyone has a good setup for testing custom elements with jest, jsdom or similar? I have been using Puppeteer and Selenium, but they slow down the test runs too much. Any other alternatives or fixes for jsdom that makes the below test…
tirithen
  • 3,219
  • 11
  • 41
  • 65
12
votes
5 answers

How can I change a Boolean property in Lit-Element to hide content on my component?

I have a custom component that should hide content when I set a boolean property to false. Every other property gets reflected except that one. I must be doing something wrong. static get properties(){ title: { type: String, …
Bisonfan95
  • 327
  • 1
  • 2
  • 11
12
votes
2 answers

Shadow Root getElementsByClassName

I am using LitElement to create custom Web Components. I am fairly new at it and decided to try making image slideshow. I used W3Schools slideshow as reference while modifying it to work as LitElement. The problem is, that when I am trying to use…
Filip Skukan
  • 531
  • 1
  • 7
  • 18
10
votes
3 answers

shadowRoot.getSelection()?

I have a rich editor I'm re-writing as a lit-element custom element. I'm using Firefox (latest) for testing. I'm trying to get the selection for the content editable element in the custom element's shadowDom (in a method). In the Firefox debugger),…
SteveB
  • 851
  • 2
  • 7
  • 15
10
votes
5 answers

React-like refs in lit-html / lit-element?

Does lit-html have by any change something like React's ref feature? For example in the following pseudo-code inputRef would be a callback function or an object { current: ... } where lit-html could pass/set the HTMLElement instance of the input…
Natasha
  • 516
  • 7
  • 24
10
votes
2 answers

Lit-Element : Outputting Raw HTML from Property String

I'm new to Lit-Element and am having trouble outputting raw HTML when passed as a property string. I'm guessing there is a better way of accomplishing this and any help would be appreciated. JS Fiddle showing my problem here:…
iamjpg
  • 7,078
  • 1
  • 16
  • 18
10
votes
2 answers

What framework to use in order to build web components: lit-element vs stencil vs SkateJS?

I want to start leveraging http://webcomponents.me W3C standard which is now supported by all major web browsers. I researched the internet and so far I found following frameworks: Stencil - Created by ionic. All ionic components use this…
Danilo Puric
  • 779
  • 2
  • 13
  • 23
10
votes
3 answers

Is it possible to pass a function from html into a lit-element?

I have seen examples of passing a function from a parent lit-element to a child one like here - https://medium.com/@westbrook/litelement-to-do-app-1e08a31707a4 But I want the users of my element, not to be forced to create a wrapper element to use…
Joelio
  • 4,621
  • 6
  • 44
  • 80
10
votes
6 answers

How to observe property changes with LitElement

I don't know how to observe property changes in LitElement. I've been trying these methods, but I couldn't get these to work: static get properties() { return { temp1:String, temp2: { type:String, observer:…
grohjy
  • 2,059
  • 1
  • 18
  • 19
1
2 3
…
45 46