1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
|
/**
* @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`<p>your ${adjective} template here</p>`;
* }
* }
*
* 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;
}
}
/**
* 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 {
static ['_$litElement$']: boolean;
/**
* @category rendering
*/
readonly renderOptions: RenderOptions;
private __childPart;
/**
* @category rendering
*/
protected createRenderRoot(): HTMLElement | DocumentFragment;
/**
* 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
|
