1 | /**
|
2 | * @license
|
3 | * Copyright 2017 Google LLC
|
4 | * SPDX-License-Identifier: BSD-3-Clause
|
5 | */
|
6 | /**
|
7 | * The main LitElement module, which defines the [[`LitElement`]] base class and
|
8 | * related APIs.
|
9 | *
|
10 | * LitElement components can define a template and a set of observed
|
11 | * properties. Changing an observed property triggers a re-render of the
|
12 | * element.
|
13 | *
|
14 | * Import [[`LitElement`]] and [[`html`]] from this module to create a
|
15 | * component:
|
16 | *
|
17 | * ```js
|
18 | * import {LitElement, html} from 'lit-element';
|
19 | *
|
20 | * class MyElement extends LitElement {
|
21 | *
|
22 | * // Declare observed properties
|
23 | * static get properties() {
|
24 | * return {
|
25 | * adjective: {}
|
26 | * }
|
27 | * }
|
28 | *
|
29 | * constructor() {
|
30 | * this.adjective = 'awesome';
|
31 | * }
|
32 | *
|
33 | * // Define the element's template
|
34 | * render() {
|
35 | * return html`<p>your ${adjective} template here</p>`;
|
36 | * }
|
37 | * }
|
38 | *
|
39 | * customElements.define('my-element', MyElement);
|
40 | * ```
|
41 | *
|
42 | * `LitElement` extends [[`ReactiveElement`]] and adds lit-html templating.
|
43 | * The `ReactiveElement` class is provided for users that want to build
|
44 | * their own custom element base classes that don't use lit-html.
|
45 | *
|
46 | * @packageDocumentation
|
47 | */
|
48 | import { PropertyValues, ReactiveElement } from '@lit/reactive-element';
|
49 | import { RenderOptions } from 'lit-html';
|
50 | export * from '@lit/reactive-element';
|
51 | export * from 'lit-html';
|
52 | export declare const UpdatingElement: typeof ReactiveElement;
|
53 | /**
|
54 | * Base element class that manages element properties and attributes, and
|
55 | * renders a lit-html template.
|
56 | *
|
57 | * To define a component, subclass `LitElement` and implement a
|
58 | * `render` method to provide the component's template. Define properties
|
59 | * using the [[`properties`]] property or the [[`property`]] decorator.
|
60 | */
|
61 | export declare class LitElement extends ReactiveElement {
|
62 | /**
|
63 | * Ensure this class is marked as `finalized` as an optimization ensuring
|
64 | * it will not needlessly try to `finalize`.
|
65 | *
|
66 | * Note this property name is a string to prevent breaking Closure JS Compiler
|
67 | * optimizations. See @lit/reactive-element for more information.
|
68 | */
|
69 | protected static ['finalized']: boolean;
|
70 | static ['_$litElement$']: boolean;
|
71 | /**
|
72 | * @category rendering
|
73 | */
|
74 | readonly renderOptions: RenderOptions;
|
75 | private __childPart;
|
76 | /**
|
77 | * @category rendering
|
78 | */
|
79 | protected createRenderRoot(): Element | ShadowRoot;
|
80 | /**
|
81 | * Updates the element. This method reflects property values to attributes
|
82 | * and calls `render` to render DOM via lit-html. Setting properties inside
|
83 | * this method will *not* trigger another update.
|
84 | * @param changedProperties Map of changed properties with old values
|
85 | * @category updates
|
86 | */
|
87 | protected update(changedProperties: PropertyValues): void;
|
88 | /**
|
89 | * Invoked when the component is added to the document's DOM.
|
90 | *
|
91 | * In `connectedCallback()` you should setup tasks that should only occur when
|
92 | * the element is connected to the document. The most common of these is
|
93 | * adding event listeners to nodes external to the element, like a keydown
|
94 | * event handler added to the window.
|
95 | *
|
96 | * ```ts
|
97 | * connectedCallback() {
|
98 | * super.connectedCallback();
|
99 | * addEventListener('keydown', this._handleKeydown);
|
100 | * }
|
101 | * ```
|
102 | *
|
103 | * Typically, anything done in `connectedCallback()` should be undone when the
|
104 | * element is disconnected, in `disconnectedCallback()`.
|
105 | *
|
106 | * @category lifecycle
|
107 | */
|
108 | connectedCallback(): void;
|
109 | /**
|
110 | * Invoked when the component is removed from the document's DOM.
|
111 | *
|
112 | * This callback is the main signal to the element that it may no longer be
|
113 | * used. `disconnectedCallback()` should ensure that nothing is holding a
|
114 | * reference to the element (such as event listeners added to nodes external
|
115 | * to the element), so that it is free to be garbage collected.
|
116 | *
|
117 | * ```ts
|
118 | * disconnectedCallback() {
|
119 | * super.disconnectedCallback();
|
120 | * window.removeEventListener('keydown', this._handleKeydown);
|
121 | * }
|
122 | * ```
|
123 | *
|
124 | * An element may be re-connected after being disconnected.
|
125 | *
|
126 | * @category lifecycle
|
127 | */
|
128 | disconnectedCallback(): void;
|
129 | /**
|
130 | * Invoked on each update to perform rendering tasks. This method may return
|
131 | * any value renderable by lit-html's `ChildPart` - typically a
|
132 | * `TemplateResult`. Setting properties inside this method will *not* trigger
|
133 | * the element to update.
|
134 | * @category rendering
|
135 | */
|
136 | protected render(): unknown;
|
137 | }
|
138 | /**
|
139 | * END USERS SHOULD NOT RELY ON THIS OBJECT.
|
140 | *
|
141 | * Private exports for use by other Lit packages, not intended for use by
|
142 | * external users.
|
143 | *
|
144 | * We currently do not make a mangled rollup build of the lit-ssr code. In order
|
145 | * to keep a number of (otherwise private) top-level exports mangled in the
|
146 | * client side code, we export a _$LE object containing those members (or
|
147 | * helper methods for accessing private fields of those members), and then
|
148 | * re-export them for use in lit-ssr. This keeps lit-ssr agnostic to whether the
|
149 | * client-side code is being used in `dev` mode or `prod` mode.
|
150 | *
|
151 | * This has a unique name, to disambiguate it from private exports in
|
152 | * lit-html, since this module re-exports all of lit-html.
|
153 | *
|
154 | * @private
|
155 | */
|
156 | export declare const _$LE: {
|
157 | _$attributeToProperty: (el: LitElement, name: string, value: string | null) => void;
|
158 | _$changedProperties: (el: LitElement) => any;
|
159 | };
|
160 | //# sourceMappingURL=lit-element.d.ts.map |
\ | No newline at end of file |