lit-element.d.ts 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  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. /**
  75. * Base element class that manages element properties and attributes, and
  76. * renders a lit-html template.
  77. *
  78. * To define a component, subclass `LitElement` and implement a
  79. * `render` method to provide the component's template. Define properties
  80. * using the {@linkcode LitElement.properties properties} property or the
  81. * {@linkcode property} decorator.
  82. */
  83. export declare class LitElement extends ReactiveElement {
  84. static ['_$litElement$']: boolean;
  85. /**
  86. * @category rendering
  87. */
  88. readonly renderOptions: RenderOptions;
  89. private __childPart;
  90. /**
  91. * @category rendering
  92. */
  93. protected createRenderRoot(): HTMLElement | DocumentFragment;
  94. /**
  95. * Updates the element. This method reflects property values to attributes
  96. * and calls `render` to render DOM via lit-html. Setting properties inside
  97. * this method will *not* trigger another update.
  98. * @param changedProperties Map of changed properties with old values
  99. * @category updates
  100. */
  101. protected update(changedProperties: PropertyValues): void;
  102. /**
  103. * Invoked when the component is added to the document's DOM.
  104. *
  105. * In `connectedCallback()` you should setup tasks that should only occur when
  106. * the element is connected to the document. The most common of these is
  107. * adding event listeners to nodes external to the element, like a keydown
  108. * event handler added to the window.
  109. *
  110. * ```ts
  111. * connectedCallback() {
  112. * super.connectedCallback();
  113. * addEventListener('keydown', this._handleKeydown);
  114. * }
  115. * ```
  116. *
  117. * Typically, anything done in `connectedCallback()` should be undone when the
  118. * element is disconnected, in `disconnectedCallback()`.
  119. *
  120. * @category lifecycle
  121. */
  122. connectedCallback(): void;
  123. /**
  124. * Invoked when the component is removed from the document's DOM.
  125. *
  126. * This callback is the main signal to the element that it may no longer be
  127. * used. `disconnectedCallback()` should ensure that nothing is holding a
  128. * reference to the element (such as event listeners added to nodes external
  129. * to the element), so that it is free to be garbage collected.
  130. *
  131. * ```ts
  132. * disconnectedCallback() {
  133. * super.disconnectedCallback();
  134. * window.removeEventListener('keydown', this._handleKeydown);
  135. * }
  136. * ```
  137. *
  138. * An element may be re-connected after being disconnected.
  139. *
  140. * @category lifecycle
  141. */
  142. disconnectedCallback(): void;
  143. /**
  144. * Invoked on each update to perform rendering tasks. This method may return
  145. * any value renderable by lit-html's `ChildPart` - typically a
  146. * `TemplateResult`. Setting properties inside this method will *not* trigger
  147. * the element to update.
  148. * @category rendering
  149. */
  150. protected render(): unknown;
  151. }
  152. /**
  153. * END USERS SHOULD NOT RELY ON THIS OBJECT.
  154. *
  155. * Private exports for use by other Lit packages, not intended for use by
  156. * external users.
  157. *
  158. * We currently do not make a mangled rollup build of the lit-ssr code. In order
  159. * to keep a number of (otherwise private) top-level exports mangled in the
  160. * client side code, we export a _$LE object containing those members (or
  161. * helper methods for accessing private fields of those members), and then
  162. * re-export them for use in lit-ssr. This keeps lit-ssr agnostic to whether the
  163. * client-side code is being used in `dev` mode or `prod` mode.
  164. *
  165. * This has a unique name, to disambiguate it from private exports in
  166. * lit-html, since this module re-exports all of lit-html.
  167. *
  168. * @private
  169. */
  170. export declare const _$LE: {
  171. _$attributeToProperty: (el: LitElement, name: string, value: string | null) => void;
  172. _$changedProperties: (el: LitElement) => any;
  173. };
  174. //# sourceMappingURL=lit-element.d.ts.map