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
0
votes
2 answers

element not updating value on html Polymer V3

I want to update the todoList in my PARENT COMPONENT after I have added a new item in my child using the AddItem() method. Nothing gets added the first time. EX. if I add "take test" doesn't get render, then if I add "take shower" doesn't get…
Patricio Vargas
  • 5,236
  • 11
  • 49
  • 100
0
votes
1 answer

Initialisation of CustomElement removes class methods(get/set also) if property with same name set before element defined

Custom-element could be initialised asynchronously, for instance after lazy loading its definition class. Lets take a look at this example, we have an element sitting in the DOM that is not initialised…
ZuzEL
  • 12,768
  • 8
  • 47
  • 68
0
votes
1 answer

How to reset polymer iron-autogrow-textarea or paper-textarea through it's methods?

I am able to clear iron-autogrow-textarea by setting the value to empty string but I am unable to clear the newline or reset it. I am using event on keycode enter which works but leaves this new line and no way I can find a way to reset the…
Walker
  • 891
  • 2
  • 11
  • 26
0
votes
1 answer

Polymer.importPath in LitElement

Polymer treats relative URLs as relative to main document. Polymer 3 provides a [[importPath]] value for relative URLs. LitElement does not provide this helper. What is the best way to handle relative paths in LitElement using Polymer CLI build…
MadeInLagny
  • 185
  • 1
  • 12
0
votes
1 answer

How to make a custom footer lit element remain at the bottom of a page

How can I make footer web component remain at the bottom of any page where it will be used? regardless of whether the content of the page is enough or not. I have tried adding css properties such as position: fixed; and bottom: 0; but on same pages…
Lenny Kiano
  • 120
  • 1
  • 14
0
votes
1 answer

Lit-Element: first updated in class and mixin only fired once

Using lit-element, if a class has a firstUpdate method and extends a mixin that also has a firstUpdate method, only one of the two is fired. See example here: https://stackblitz.com/edit/jmlit-element-sample-yhtv3h. Spec clearly state that…
JoceM
  • 53
  • 1
  • 5
0
votes
1 answer

how to make the css dynamical?

static get styles() { const width = window.innerWidth const height = window.innerHeight return css` :host{ display: block; } .my-img{ max-width: ${width}px; max-height:…
zzzgoo
  • 1,974
  • 2
  • 17
  • 34
0
votes
1 answer

Clarification on lit-element components and where to browse them

As Polymer 3 migrates to lit-element (hopefully that is an accurate characterization), where is the best place to search for existing/new components that are compatible with lit-element, especially when considering the deprecation of the two-way…
Paul Mazzuca
  • 567
  • 1
  • 5
  • 19
0
votes
1 answer

How can i make my vaadin renderers return my render functions as expected?

I'm using lit-element and vaadin grid and i'm trying to use the renderer functions in order to return data into the appropriate vaadin column. However, when trying to return the render() method its rendering the data into vaadin grid column as…
0
votes
1 answer

Propagate a value in child components

A button toggles a boolean value in MainComp. I want to propagate the value in both the nested child components. My real project works with the first level child, it fails to update the second level child component. But oddly enough trying to…
alfredopacino
  • 2,979
  • 9
  • 42
  • 68
0
votes
1 answer

Passing data between components in Polymer 3

I have 3 components: a mainComponent, a SideMenu, and ContentArea (both children of mainComponent). I want to make ContentArea see the changes of popupOpen value. The function togglePopup() simply toggle the popupOpen boolean value. In more…
alfredopacino
  • 2,979
  • 9
  • 42
  • 68
0
votes
1 answer

Show the loaded element first in javascript

I would like to know how to sort the loaded things first using javascript. As shown, I have array of elements, which am passing to a function and making ajax call, till it completes success data, am showing a loader(.gif). I want to show loaded…
Senthil
  • 961
  • 1
  • 8
  • 21
0
votes
0 answers

rollup cant build in html tag

i inject ${this.Classes} into my html tag in render function. when i start it with rollup, it works as expected. but when i try to build it with rollup build, it gives error: " html-minifier deleted something major, cannot proceed." and cant…
ali suleymanli
  • 1,033
  • 1
  • 9
  • 12
0
votes
1 answer

How to hook data-grid events in parent lit-element component?

I want to react on events started by elements placed in the data-grid rows. Vaading data-grid prevents events from bubbling up to the parent component containing the grid. Having buttons placed in the grid column rendered for each row I cannot catch…
0
votes
1 answer

Styling `::slotted()` elements from the static styles property

I'm trying to style the :slotted elements in a component from the static styles property as recommended in the docs. static get styles() { return [ css ` ::slotted(*) { color: var(--white, #fff); font-family:…
Xaviju
  • 250
  • 4
  • 12