Stack Overflow
Stack Overflow

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

Is there a way to use es6 modules to import html template into javascript?

There seems to be many dated questions on this topic, I cant find one more recent (2018). Also other questions just focus on getting this to work, I am focused on the right path forward for making this work following the path of ES6 Modules with…
Joelio
  • 4,621
  • 6
  • 44
  • 80
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
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
9
votes
1 answer

How to add mixin for height in mwc textfield?

I am using polymer 3 and lit-element(2.2.1). The version of mwc-textfield is 0.13.0. I have read the documentations related to this version.In this documentation, I have found that we can add mixin for height. I had tried several ways but did not…
Himabindu
  • 634
  • 8
  • 22
9
votes
3 answers

Dynamic tags for lit-html not possible?

Can anyone tell me why I cannot use variables within lit-html's html method? const h1 = 'h1'; return html` <${h1} class="a-heading ${classes}"> `; If I replace ${h1} with h1 that works without problems.
codepleb
  • 10,086
  • 14
  • 69
  • 111
9
votes
1 answer

lit-element: how to efficiently share a property from parent to child custom element

Question: Is there a way to propagate a property change to a child element without triggering its render function? Currently when I update the property in parent's switchViewModeHandler it triggers a re-render on the child. Use-case: toggling the…
montrealist
  • 5,593
  • 12
  • 46
  • 68
7
votes
1 answer

"SyntaxError: Cannot use import statement outside a module" when writing test with typescript with lit-html

I use typescript to write a simple demo with lit-html: import {html, TemplateResult} from 'lit-html'; export default function sayHello(name: string): TemplateResult { return html`

Hello ${name}

`; } and use jest to write some simple…
Freewind
  • 193,756
  • 157
  • 432
  • 708
7
votes
1 answer

How to deploy / use lit-html, lit-element on a live web server

I started trying out lit-html and lit-elements, playing around with it and now I git in the problem where I cannot find out how to publish such code online. Never worked with Node-js packages on online platforms, only used bits of code from it.…
devFlats
  • 71
  • 1
  • 2
7
votes
2 answers

Custom litelement select not rerendering correctly

I've created a custom select-component with LitElement: import { LitElement, html } from 'lit-element'; class CustomSelect extends LitElement { static get properties() { return { options: { type: Array }, …
CaptainBarefoot
  • 71
  • 1
  • 3
7
votes
2 answers

Best practices for internationalization/localization with lit-element/lit-html

Thank you for reading. I am new to polymer/lit-element,lit-html. I have started with the PWA starter kit. And at my surprise it doesn't use polymer elements but lit-elements. I have tried to apply the default app-localize-behaviour from…
Guillaume Lastecoueres
  • 215
  • 2
  • 12
7
votes
2 answers

Separating HTML and CSS from Javascript Lit Element

We are working with Lit Element and our component files are getting rather large because we have to write styling and html within the .js file. Is there a way to split them in separate files and then import them into our components? What would be…
Filip Skukan
  • 531
  • 1
  • 7
  • 18
6
votes
2 answers

Getting error "Strict MIME type checking is enforced for module scripts per HTML spec" when trying to import project

Trying to create some reusable components for our Electron screen using lit-html. When I attempt to add an example component I run into an error. Using electron: ^5.0.6 Trying to import module my-element.js (most of this code is example code and…
islalobo
  • 617
  • 2
  • 8
  • 22
6
votes
2 answers

What's the usage of 'await 0'?

Summary I'm looking at TODO MVC Example with shadow DOM and customElements and in litRender.js there's a weird code in invalidate() function:'await 0'. I want to know what's the purpose of this code. Background I did a little search on Google but I…
ditto
  • 93
  • 9
6
votes
2 answers

How to specify event handlers when using lit-html?

The main documentation under [Writing Templates] the following example for binding an event handler with lit-html is provided. html`` Adding this a simple page with the default render…
jpierson
  • 16,435
  • 14
  • 105
  • 149
1
2 3
…
15 16