Closed markmals closed 1 year ago
Using the html tagged template literal from lit-html, we can dynamically render HTML into our web components' shadow root.
html
lit-html
lit-html lets you define UI components as functions that take state and return templates. You can then render those templates into an HTMLElement:
import { html, render } from "lit-html" const ui = (title) => html`<h1>${title}</h1>` render(ui("Example Title"), document.body)
Lit also provides support for declaratively setting event handlers (@event="${handler}" attributes) and IDL properties (.someProp="${someValue}").
@event="${handler}"
.someProp="${someValue}"
By using the shadow root, we get access to all of the features the shadow DOM brings along with it. This includes:
<style>
<slot>
Lit template results are small, optimized representations of the DOM rather than actualized DOM nodes, so re-rendering is expected and generally a cheap operation.
Implemented in 2a699ee
markmals
commented
1 year ago markmals
commented
1 year ago
Using the
htmltagged template literal fromlit-html, we can dynamically render HTML into our web components' shadow root.lit-htmllets you define UI components as functions that take state and return templates. You can then render those templates into an HTMLElement:Lit also provides support for declaratively setting event handlers (
@event="${handler}"attributes) and IDL properties (.someProp="${someValue}").By using the shadow root, we get access to all of the features the shadow DOM brings along with it. This includes:
<style>tag in your shadow root will scope those styles to the elements within the same shadow root<slot>element, we can project children through our web component's shadow rootLit template results are small, optimized representations of the DOM rather than actualized DOM nodes, so re-rendering is expected and generally a cheap operation.