lit-element
- Version 4.1.1
- Published
- 122 kB
- 3 dependencies
- BSD-3-Clause license
Install
npm i lit-element
yarn add lit-element
pnpm add lit-element
Overview
A simple base class for creating fast, lightweight web components
Index
Classes
class LitElement
class LitElement extends ReactiveElement {}
Base element class that manages element properties and attributes, and renders a lit-html template.
To define a component, subclass
LitElement
and implement arender
method to provide the component's template. Define properties using the property or the decorator.
property ['_$litElement$']
static ['_$litElement$']: boolean;
property renderOptions
readonly renderOptions: RenderOptions;
rendering
method connectedCallback
connectedCallback: () => void;
Invoked when the component is added to the document's DOM.
In
connectedCallback()
you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.connectedCallback() {super.connectedCallback();addEventListener('keydown', this._handleKeydown);}Typically, anything done in
connectedCallback()
should be undone when the element is disconnected, indisconnectedCallback()
.lifecycle
method createRenderRoot
protected createRenderRoot: () => HTMLElement | DocumentFragment;
rendering
method disconnectedCallback
disconnectedCallback: () => void;
Invoked when the component is removed from the document's DOM.
This callback is the main signal to the element that it may no longer be used.
disconnectedCallback()
should ensure that nothing is holding a reference to the element (such as event listeners added to nodes external to the element), so that it is free to be garbage collected.disconnectedCallback() {super.disconnectedCallback();window.removeEventListener('keydown', this._handleKeydown);}An element may be re-connected after being disconnected.
lifecycle
method render
protected render: () => unknown;
Invoked on each update to perform rendering tasks. This method may return any value renderable by lit-html's
ChildPart
- typically aTemplateResult
. Setting properties inside this method will *not* trigger the element to update. rendering
method update
protected update: (changedProperties: PropertyValues) => void;
Updates the element. This method reflects property values to attributes and calls
render
to render DOM via lit-html. Setting properties inside this method will *not* trigger another update.Parameter changedProperties
Map of changed properties with old values updates
Namespaces
namespace Unstable
namespace Unstable {}
Contains types that are part of the unstable debug API.
Everything in this API is not stable and may change or be removed in the future, even on patch releases.
namespace Unstable.DebugLog
namespace Unstable.DebugLog {}
When Lit is running in dev mode and
window.emitLitDebugLogEvents
is true, we will emit 'lit-debug' events to window, with live details about the update and render lifecycle. These can be useful for writing debug tooling and visualizations.Please be aware that running with window.emitLitDebugLogEvents has performance overhead, making certain operations that are normally very cheap (like a no-op render) much slower, because we must copy data and dispatch events.
type Entry
type Entry = LitUnstable.DebugLog.Entry | ReactiveUnstable.DebugLog.Entry;
Package Files (2)
Dependencies (3)
Dev Dependencies (6)
Peer Dependencies (0)
No peer dependencies.
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/lit-element
.
- Markdown[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/lit-element)
- HTML<a href="https://www.jsdocs.io/package/lit-element"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 3641 ms. - Missing or incorrect documentation? Open an issue for this package.