/** * @license * Copyright 2017 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ /** * The main LitElement module, which defines the {@linkcode LitElement} base * class and related APIs. * * LitElement components can define a template and a set of observed * properties. Changing an observed property triggers a re-render of the * element. * * Import {@linkcode LitElement} and {@linkcode html} from this module to * create a component: * * ```js * import {LitElement, html} from 'lit-element'; * * class MyElement extends LitElement { * * // Declare observed properties * static get properties() { * return { * adjective: {} * } * } * * constructor() { * this.adjective = 'awesome'; * } * * // Define the element's template * render() { * return html`
your ${adjective} template here
`; * } * } * * customElements.define('my-element', MyElement); * ``` * * `LitElement` extends {@linkcode ReactiveElement} and adds lit-html * templating. The `ReactiveElement` class is provided for users that want to * build their own custom element base classes that don't use lit-html. * * @packageDocumentation */ import { PropertyValues, ReactiveElement } from '@lit/reactive-element'; import { RenderOptions } from 'lit-html'; export * from '@lit/reactive-element'; export * from 'lit-html'; import { LitUnstable } from 'lit-html'; import { ReactiveUnstable } from '@lit/reactive-element'; /** * 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. */ export declare namespace Unstable { /** * 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. */ namespace DebugLog { type Entry = LitUnstable.DebugLog.Entry | ReactiveUnstable.DebugLog.Entry; } } export declare const UpdatingElement: typeof ReactiveElement; /** * Base element class that manages element properties and attributes, and * renders a lit-html template. * * To define a component, subclass `LitElement` and implement a * `render` method to provide the component's template. Define properties * using the {@linkcode LitElement.properties properties} property or the * {@linkcode property} decorator. */ export declare class LitElement extends ReactiveElement { /** * Ensure this class is marked as `finalized` as an optimization ensuring * it will not needlessly try to `finalize`. * * Note this property name is a string to prevent breaking Closure JS Compiler * optimizations. See @lit/reactive-element for more information. */ protected static ['finalized']: boolean; static ['_$litElement$']: boolean; /** * @category rendering */ readonly renderOptions: RenderOptions; private __childPart; /** * @category rendering */ protected createRenderRoot(): Element | ShadowRoot; /** * 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. * @param changedProperties Map of changed properties with old values * @category updates */ protected update(changedProperties: PropertyValues): 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. * * ```ts * connectedCallback() { * super.connectedCallback(); * addEventListener('keydown', this._handleKeydown); * } * ``` * * Typically, anything done in `connectedCallback()` should be undone when the * element is disconnected, in `disconnectedCallback()`. * * @category lifecycle */ connectedCallback(): 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. * * ```ts * disconnectedCallback() { * super.disconnectedCallback(); * window.removeEventListener('keydown', this._handleKeydown); * } * ``` * * An element may be re-connected after being disconnected. * * @category lifecycle */ disconnectedCallback(): void; /** * Invoked on each update to perform rendering tasks. This method may return * any value renderable by lit-html's `ChildPart` - typically a * `TemplateResult`. Setting properties inside this method will *not* trigger * the element to update. * @category rendering */ protected render(): unknown; } /** * END USERS SHOULD NOT RELY ON THIS OBJECT. * * Private exports for use by other Lit packages, not intended for use by * external users. * * We currently do not make a mangled rollup build of the lit-ssr code. In order * to keep a number of (otherwise private) top-level exports mangled in the * client side code, we export a _$LE object containing those members (or * helper methods for accessing private fields of those members), and then * re-export them for use in lit-ssr. This keeps lit-ssr agnostic to whether the * client-side code is being used in `dev` mode or `prod` mode. * * This has a unique name, to disambiguate it from private exports in * lit-html, since this module re-exports all of lit-html. * * @private */ export declare const _$LE: { _$attributeToProperty: (el: LitElement, name: string, value: string | null) => void; _$changedProperties: (el: LitElement) => any; }; //# sourceMappingURL=lit-element.d.ts.map