Questions tagged [lit-html]

Lit is a JS web component library. Lit HTML is the render component that uses tagged template literals to only update the parts of the DOM that have changed. Use this tag on questions related to using it standalone, and in components other than those based on LitElement.

is a JS web component library.

Lit HTML uses tagged template literals to build DOM that can be reused. It can be used standalone to build components or render DOM without the .

236 questions
0
votes
1 answer

lit-element - How to call an event from a slot button?

element import { LitElement, html } from 'lit-element'; class Component extends LitElement { render () { return html`
jofftiquez
  • 7,548
  • 10
  • 67
  • 121
0
votes
1 answer

lit-element bind to properties of an object that may be null or its subproperties may be null

I have this scenario all the time: a list of entities (say Customer) and a form to edit the selected entity. I bind the form fields to properties of the currently selected entity like this:
NicolasR
  • 2,222
  • 3
  • 23
  • 38
0
votes
1 answer

LitElement shadow root after styles loaded event

I have a problem, I need to handle event after CSS styles was loaded into my component. I was trying to use lit-element lifecycle, still they are fired to early. I'm trying to get my DOM element starting position and other data, but I get an initial…
0
votes
1 answer

How to pass data between lit-element templates?

I am trying to pass data from one component to another. My idea is to have a generic component with buttons that increase or decrease a value and add those specific values ​​to another template. Here is my code with the buttons: import {…
user6767724
0
votes
1 answer

How to render the value in the form using web components or lit-html?

I am using lit-html library to render the data into the form. The program should auto fill the product name upon inputting the product number. I have written the code but I am unable to auto fill the product name field. For the product name, I have…
gokha
  • 5
  • 3
0
votes
1 answer

Viewing the value of an element in litElement

I have a very simple element that wrap an element. Coming from Polymer, I am having a bit of a hard time adjusting. I want to display the value of the range. This is what I came up with: import { LitElement, html } from…
Merc
  • 16,277
  • 18
  • 79
  • 122
0
votes
1 answer

Polymer 3, apollo-client, graphql and CommonJS modules

Dears, I'm trying to make GraphQL work with Polymer 3 (or lit-html) Trying to use apollo-client (which seems has adapters for polymer-elements and lit-html) and stuck with problem of importing CommonJS modules (i.e. module.export) in…
alex
  • 521
  • 1
  • 5
  • 17
0
votes
1 answer

How to share 1 instance of lit-element across many web components

I have many web components (each in its own repo) and would like to share one instance of lit-element/lit-html across them all. The idea is to reduce bundle size. I do not want a separate instance in each bundle I made a Webpack UMD library of…
Maurice
  • 109
  • 1
  • 7
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

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

Post request in Lit-Html

Can somebody help me in sharing the example of implementing a post request. I have a web form and after filling all required parameters a json request should be created and it should be passed to the post API. I am using java script in Lit-html…
Harry
  • 15
  • 2
  • 9
0
votes
1 answer

why does open-wc scaffold promotes lit-html

I have worked around one year with Polymer 1 and 2 in a big company with large webcomponents catalog and I am confident webcomponents can be very usefull. I am aware about "cons ideas" like…
Jim C
  • 3,957
  • 25
  • 85
  • 162
0
votes
1 answer

UI5 Web Components Select does not open

I want to use the UI5 Web Component "Select" for my Site, but the dropdown doesn't open. I'm using Lit-HTML, Typescript and Webpack. I copied the example from the Playground into my code and imported both modules (Select, StandardListItem). The…
0
votes
2 answers

how to Implement lit-element-bootstrap package in lit-lement

I would like to implement lit-element-bootstrap package in lit-element. I am getting following error in console, Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced…
Senthil
  • 961
  • 1
  • 8
  • 21
0
votes
1 answer

lit-element styles within html template versus static styles getter?

given the following code, and the lit-html vscode extension, syntax highlighting doesn't work on the static styles getter class MyComponent extends LitElement { // SYNTAX HIGHLIGHTING FAILS static get styles() { return css` * {} …
ChaseMoskal
  • 7,151
  • 5
  • 37
  • 50