lit-element.d.ts 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  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 {@linkcode LitElement} base
  8. * class and 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 {@linkcode LitElement} and {@linkcode html} from this module to
  15. * create a 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 {@linkcode ReactiveElement} and adds lit-html
  43. * templating. The `ReactiveElement` class is provided for users that want to
  44. * build 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. import { LitUnstable } from 'lit-html';
  53. import { ReactiveUnstable } from '@lit/reactive-element';
  54. /**
  55. * Contains types that are part of the unstable debug API.
  56. *
  57. * Everything in this API is not stable and may change or be removed in the future,
  58. * even on patch releases.
  59. */
  60. export declare namespace Unstable {
  61. /**
  62. * When Lit is running in dev mode and `window.emitLitDebugLogEvents` is true,
  63. * we will emit 'lit-debug' events to window, with live details about the update and render
  64. * lifecycle. These can be useful for writing debug tooling and visualizations.
  65. *
  66. * Please be aware that running with window.emitLitDebugLogEvents has performance overhead,
  67. * making certain operations that are normally very cheap (like a no-op render) much slower,
  68. * because we must copy data and dispatch events.
  69. */
  70. namespace DebugLog {
  71. type Entry = LitUnstable.DebugLog.Entry | ReactiveUnstable.DebugLog.Entry;
  72. }
  73. }
  74. export declare const UpdatingElement: typeof ReactiveElement;
  75. /**
  76. * Base element class that manages element properties and attributes, and
  77. * renders a lit-html template.
  78. *
  79. * To define a component, subclass `LitElement` and implement a
  80. * `render` method to provide the component's template. Define properties
  81. * using the {@linkcode LitElement.properties properties} property or the
  82. * {@linkcode property} decorator.
  83. */
  84. export declare class LitElement extends ReactiveElement {
  85. /**
  86. * Ensure this class is marked as `finalized` as an optimization ensuring
  87. * it will not needlessly try to `finalize`.
  88. *
  89. * Note this property name is a string to prevent breaking Closure JS Compiler
  90. * optimizations. See @lit/reactive-element for more information.
  91. */
  92. protected static ['finalized']: boolean;
  93. static ['_$litElement$']: boolean;
  94. /**
  95. * @category rendering
  96. */
  97. readonly renderOptions: RenderOptions;
  98. private __childPart;
  99. /**
  100. * @category rendering
  101. */
  102. protected createRenderRoot(): Element | ShadowRoot;
  103. /**
  104. * Updates the element. This method reflects property values to attributes
  105. * and calls `render` to render DOM via lit-html. Setting properties inside
  106. * this method will *not* trigger another update.
  107. * @param changedProperties Map of changed properties with old values
  108. * @category updates
  109. */
  110. protected update(changedProperties: PropertyValues): void;
  111. /**
  112. * Invoked when the component is added to the document's DOM.
  113. *
  114. * In `connectedCallback()` you should setup tasks that should only occur when
  115. * the element is connected to the document. The most common of these is
  116. * adding event listeners to nodes external to the element, like a keydown
  117. * event handler added to the window.
  118. *
  119. * ```ts
  120. * connectedCallback() {
  121. * super.connectedCallback();
  122. * addEventListener('keydown', this._handleKeydown);
  123. * }
  124. * ```
  125. *
  126. * Typically, anything done in `connectedCallback()` should be undone when the
  127. * element is disconnected, in `disconnectedCallback()`.
  128. *
  129. * @category lifecycle
  130. */
  131. connectedCallback(): void;
  132. /**
  133. * Invoked when the component is removed from the document's DOM.
  134. *
  135. * This callback is the main signal to the element that it may no longer be
  136. * used. `disconnectedCallback()` should ensure that nothing is holding a
  137. * reference to the element (such as event listeners added to nodes external
  138. * to the element), so that it is free to be garbage collected.
  139. *
  140. * ```ts
  141. * disconnectedCallback() {
  142. * super.disconnectedCallback();
  143. * window.removeEventListener('keydown', this._handleKeydown);
  144. * }
  145. * ```
  146. *
  147. * An element may be re-connected after being disconnected.
  148. *
  149. * @category lifecycle
  150. */
  151. disconnectedCallback(): void;
  152. /**
  153. * Invoked on each update to perform rendering tasks. This method may return
  154. * any value renderable by lit-html's `ChildPart` - typically a
  155. * `TemplateResult`. Setting properties inside this method will *not* trigger
  156. * the element to update.
  157. * @category rendering
  158. */
  159. protected render(): unknown;
  160. }
  161. /**
  162. * END USERS SHOULD NOT RELY ON THIS OBJECT.
  163. *
  164. * Private exports for use by other Lit packages, not intended for use by
  165. * external users.
  166. *
  167. * We currently do not make a mangled rollup build of the lit-ssr code. In order
  168. * to keep a number of (otherwise private) top-level exports mangled in the
  169. * client side code, we export a _$LE object containing those members (or
  170. * helper methods for accessing private fields of those members), and then
  171. * re-export them for use in lit-ssr. This keeps lit-ssr agnostic to whether the
  172. * client-side code is being used in `dev` mode or `prod` mode.
  173. *
  174. * This has a unique name, to disambiguate it from private exports in
  175. * lit-html, since this module re-exports all of lit-html.
  176. *
  177. * @private
  178. */
  179. export declare const _$LE: {
  180. _$attributeToProperty: (el: LitElement, name: string, value: string | null) => void;
  181. _$changedProperties: (el: LitElement) => any;
  182. };
  183. //# sourceMappingURL=lit-element.d.ts.map