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
4
votes
1 answer

How to apply global css to web components through shadow-dom

I'm working on a lit-element project, and I got a problem that reset.css cannot be applied to web components wrapped with shadow-root I've tried this way, and I got this following error. Refused to apply style from…
Moro
  • 51
  • 2
4
votes
1 answer

Create an element derived from a native one -- inheritance? Composition?

I realise this is not a support forum; I am trying to sneak this in as a documentation request. Short question: what's the recommended way of creating elements that behave exactly the same as native ones, in all respects? (offering extras, yes, but…
Merc
  • 16,277
  • 18
  • 79
  • 122
3
votes
2 answers

Render lit / lit-html TemplateResult as string

In lit/lit-html/lit-element, a standard component is the TemplateResult (usually HTMLTemplateResult), created like: function renderMe(msg) { return html`
Hello ${msg}!
`; } and of course the power and efficiency of the library is that…
Michael Scott Asato Cuthbert
  • 3,442
  • 2
  • 22
  • 52
3
votes
1 answer

Using Lit with Javascript and no build tools

I am building a desktop app that monitors some things and generates data about what it is monitoring. When the user wants to interact with the data the app starts a very simple web server. The server serves static pages and has a basic http API to…
Mark M
  • 1,807
  • 2
  • 21
  • 40
3
votes
1 answer

Lit-Html "object Object" code displays in the browser

My browser displays JavaScript code in the web page instead of the expected output from my custom element. The web page shows: [object Object] The code for the custom element is simple: import { LitElement } from…
Daniel Kehoe
  • 10,952
  • 6
  • 63
  • 82
3
votes
1 answer

Best practices for add/editing forms in lit-html/lit-element

I have a rather complex form, and would like to make sure it works both in editing and as a "new record" form. The form's submit is actually prevented, and JSON is actually sent over. However, this is besides the point. Also, this.record is assigned…
Merc
  • 16,277
  • 18
  • 79
  • 122
3
votes
1 answer

Trigger component re-render when changing object property

Is it possible to somehow trigger component re-render when the property of the observed object changes? I know that the component will re-render if I replace the object but it does not when I just change its property class SomeComponent extends…
Maksym Bezruchko
  • 1,223
  • 6
  • 23
3
votes
1 answer

Lit-element that is sorting dynamic childs

I have 2 lit-element components. The parent content is : ${this.renderChildren()} The renderChildren function is looping over an array property children = [1, 2] and creating
elements. The rendered page…
Omar BELKHODJA
  • 1,622
  • 1
  • 12
  • 18
3
votes
1 answer

LitElement wont set textContent for native Web Component

I have built a native web component called which extends the functionality of