reactive-element.d.ts 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727
  1. /**
  2. * @license
  3. * Copyright 2017 Google LLC
  4. * SPDX-License-Identifier: BSD-3-Clause
  5. */
  6. /**
  7. * Use this module if you want to create your own base class extending
  8. * {@link ReactiveElement}.
  9. * @packageDocumentation
  10. */
  11. import { CSSResultGroup, CSSResultOrNative } from './css-tag.js';
  12. import type { ReactiveController, ReactiveControllerHost } from './reactive-controller.js';
  13. export * from './css-tag.js';
  14. export type { ReactiveController, ReactiveControllerHost, } from './reactive-controller.js';
  15. /**
  16. * Contains types that are part of the unstable debug API.
  17. *
  18. * Everything in this API is not stable and may change or be removed in the future,
  19. * even on patch releases.
  20. */
  21. export declare namespace ReactiveUnstable {
  22. /**
  23. * When Lit is running in dev mode and `window.emitLitDebugLogEvents` is true,
  24. * we will emit 'lit-debug' events to window, with live details about the update and render
  25. * lifecycle. These can be useful for writing debug tooling and visualizations.
  26. *
  27. * Please be aware that running with window.emitLitDebugLogEvents has performance overhead,
  28. * making certain operations that are normally very cheap (like a no-op render) much slower,
  29. * because we must copy data and dispatch events.
  30. */
  31. namespace DebugLog {
  32. type Entry = Update;
  33. interface Update {
  34. kind: 'update';
  35. }
  36. }
  37. }
  38. /**
  39. * Converts property values to and from attribute values.
  40. */
  41. export interface ComplexAttributeConverter<Type = unknown, TypeHint = unknown> {
  42. /**
  43. * Called to convert an attribute value to a property
  44. * value.
  45. */
  46. fromAttribute?(value: string | null, type?: TypeHint): Type;
  47. /**
  48. * Called to convert a property value to an attribute
  49. * value.
  50. *
  51. * It returns unknown instead of string, to be compatible with
  52. * https://github.com/WICG/trusted-types (and similar efforts).
  53. */
  54. toAttribute?(value: Type, type?: TypeHint): unknown;
  55. }
  56. declare type AttributeConverter<Type = unknown, TypeHint = unknown> = ComplexAttributeConverter<Type> | ((value: string | null, type?: TypeHint) => Type);
  57. /**
  58. * Defines options for a property accessor.
  59. */
  60. export interface PropertyDeclaration<Type = unknown, TypeHint = unknown> {
  61. /**
  62. * When set to `true`, indicates the property is internal private state. The
  63. * property should not be set by users. When using TypeScript, this property
  64. * should be marked as `private` or `protected`, and it is also a common
  65. * practice to use a leading `_` in the name. The property is not added to
  66. * `observedAttributes`.
  67. */
  68. readonly state?: boolean;
  69. /**
  70. * Indicates how and whether the property becomes an observed attribute.
  71. * If the value is `false`, the property is not added to `observedAttributes`.
  72. * If true or absent, the lowercased property name is observed (e.g. `fooBar`
  73. * becomes `foobar`). If a string, the string value is observed (e.g
  74. * `attribute: 'foo-bar'`).
  75. */
  76. readonly attribute?: boolean | string;
  77. /**
  78. * Indicates the type of the property. This is used only as a hint for the
  79. * `converter` to determine how to convert the attribute
  80. * to/from a property.
  81. */
  82. readonly type?: TypeHint;
  83. /**
  84. * Indicates how to convert the attribute to/from a property. If this value
  85. * is a function, it is used to convert the attribute value a the property
  86. * value. If it's an object, it can have keys for `fromAttribute` and
  87. * `toAttribute`. If no `toAttribute` function is provided and
  88. * `reflect` is set to `true`, the property value is set directly to the
  89. * attribute. A default `converter` is used if none is provided; it supports
  90. * `Boolean`, `String`, `Number`, `Object`, and `Array`. Note,
  91. * when a property changes and the converter is used to update the attribute,
  92. * the property is never updated again as a result of the attribute changing,
  93. * and vice versa.
  94. */
  95. readonly converter?: AttributeConverter<Type, TypeHint>;
  96. /**
  97. * Indicates if the property should reflect to an attribute.
  98. * If `true`, when the property is set, the attribute is set using the
  99. * attribute name determined according to the rules for the `attribute`
  100. * property option and the value of the property converted using the rules
  101. * from the `converter` property option.
  102. */
  103. readonly reflect?: boolean;
  104. /**
  105. * A function that indicates if a property should be considered changed when
  106. * it is set. The function should take the `newValue` and `oldValue` and
  107. * return `true` if an update should be requested.
  108. */
  109. hasChanged?(value: Type, oldValue: Type): boolean;
  110. /**
  111. * Indicates whether an accessor will be created for this property. By
  112. * default, an accessor will be generated for this property that requests an
  113. * update when set. If this flag is `true`, no accessor will be created, and
  114. * it will be the user's responsibility to call
  115. * `this.requestUpdate(propertyName, oldValue)` to request an update when
  116. * the property changes.
  117. */
  118. readonly noAccessor?: boolean;
  119. }
  120. /**
  121. * Map of properties to PropertyDeclaration options. For each property an
  122. * accessor is made, and the property is processed according to the
  123. * PropertyDeclaration options.
  124. */
  125. export interface PropertyDeclarations {
  126. readonly [key: string]: PropertyDeclaration;
  127. }
  128. declare type PropertyDeclarationMap = Map<PropertyKey, PropertyDeclaration>;
  129. /**
  130. * A Map of property keys to values.
  131. *
  132. * Takes an optional type parameter T, which when specified as a non-any,
  133. * non-unknown type, will make the Map more strongly-typed, associating the map
  134. * keys with their corresponding value type on T.
  135. *
  136. * Use `PropertyValues<this>` when overriding ReactiveElement.update() and
  137. * other lifecycle methods in order to get stronger type-checking on keys
  138. * and values.
  139. */
  140. export declare type PropertyValues<T = any> = T extends object ? PropertyValueMap<T> : Map<PropertyKey, unknown>;
  141. /**
  142. * Do not use, instead prefer {@linkcode PropertyValues}.
  143. */
  144. export interface PropertyValueMap<T> extends Map<PropertyKey, unknown> {
  145. get<K extends keyof T>(k: K): T[K];
  146. set<K extends keyof T>(key: K, value: T[K]): this;
  147. has<K extends keyof T>(k: K): boolean;
  148. delete<K extends keyof T>(k: K): boolean;
  149. }
  150. export declare const defaultConverter: ComplexAttributeConverter;
  151. export interface HasChanged {
  152. (value: unknown, old: unknown): boolean;
  153. }
  154. /**
  155. * Change function that returns true if `value` is different from `oldValue`.
  156. * This method is used as the default for a property's `hasChanged` function.
  157. */
  158. export declare const notEqual: HasChanged;
  159. /**
  160. * The Closure JS Compiler doesn't currently have good support for static
  161. * property semantics where "this" is dynamic (e.g.
  162. * https://github.com/google/closure-compiler/issues/3177 and others) so we use
  163. * this hack to bypass any rewriting by the compiler.
  164. */
  165. declare const finalized = "finalized";
  166. /**
  167. * A string representing one of the supported dev mode warning categories.
  168. */
  169. export declare type WarningKind = 'change-in-update' | 'migration';
  170. export declare type Initializer = (element: ReactiveElement) => void;
  171. /**
  172. * Base element class which manages element properties and attributes. When
  173. * properties change, the `update` method is asynchronously called. This method
  174. * should be supplied by subclassers to render updates as desired.
  175. * @noInheritDoc
  176. */
  177. export declare abstract class ReactiveElement extends HTMLElement implements ReactiveControllerHost {
  178. /**
  179. * Read or set all the enabled warning categories for this class.
  180. *
  181. * This property is only used in development builds.
  182. *
  183. * @nocollapse
  184. * @category dev-mode
  185. */
  186. static enabledWarnings?: WarningKind[];
  187. /**
  188. * Enable the given warning category for this class.
  189. *
  190. * This method only exists in development builds, so it should be accessed
  191. * with a guard like:
  192. *
  193. * ```ts
  194. * // Enable for all ReactiveElement subclasses
  195. * ReactiveElement.enableWarning?.('migration');
  196. *
  197. * // Enable for only MyElement and subclasses
  198. * MyElement.enableWarning?.('migration');
  199. * ```
  200. *
  201. * @nocollapse
  202. * @category dev-mode
  203. */
  204. static enableWarning?: (warningKind: WarningKind) => void;
  205. /**
  206. * Disable the given warning category for this class.
  207. *
  208. * This method only exists in development builds, so it should be accessed
  209. * with a guard like:
  210. *
  211. * ```ts
  212. * // Disable for all ReactiveElement subclasses
  213. * ReactiveElement.disableWarning?.('migration');
  214. *
  215. * // Disable for only MyElement and subclasses
  216. * MyElement.disableWarning?.('migration');
  217. * ```
  218. *
  219. * @nocollapse
  220. * @category dev-mode
  221. */
  222. static disableWarning?: (warningKind: WarningKind) => void;
  223. /**
  224. * Adds an initializer function to the class that is called during instance
  225. * construction.
  226. *
  227. * This is useful for code that runs against a `ReactiveElement`
  228. * subclass, such as a decorator, that needs to do work for each
  229. * instance, such as setting up a `ReactiveController`.
  230. *
  231. * ```ts
  232. * const myDecorator = (target: typeof ReactiveElement, key: string) => {
  233. * target.addInitializer((instance: ReactiveElement) => {
  234. * // This is run during construction of the element
  235. * new MyController(instance);
  236. * });
  237. * }
  238. * ```
  239. *
  240. * Decorating a field will then cause each instance to run an initializer
  241. * that adds a controller:
  242. *
  243. * ```ts
  244. * class MyElement extends LitElement {
  245. * @myDecorator foo;
  246. * }
  247. * ```
  248. *
  249. * Initializers are stored per-constructor. Adding an initializer to a
  250. * subclass does not add it to a superclass. Since initializers are run in
  251. * constructors, initializers will run in order of the class hierarchy,
  252. * starting with superclasses and progressing to the instance's class.
  253. *
  254. * @nocollapse
  255. */
  256. static addInitializer(initializer: Initializer): void;
  257. static _initializers?: Initializer[];
  258. /**
  259. * Maps attribute names to properties; for example `foobar` attribute to
  260. * `fooBar` property. Created lazily on user subclasses when finalizing the
  261. * class.
  262. * @nocollapse
  263. */
  264. private static __attributeToPropertyMap;
  265. /**
  266. * Marks class as having finished creating properties.
  267. */
  268. protected static [finalized]: boolean;
  269. /**
  270. * Memoized list of all element properties, including any superclass properties.
  271. * Created lazily on user subclasses when finalizing the class.
  272. * @nocollapse
  273. * @category properties
  274. */
  275. static elementProperties: PropertyDeclarationMap;
  276. /**
  277. * User-supplied object that maps property names to `PropertyDeclaration`
  278. * objects containing options for configuring reactive properties. When
  279. * a reactive property is set the element will update and render.
  280. *
  281. * By default properties are public fields, and as such, they should be
  282. * considered as primarily settable by element users, either via attribute or
  283. * the property itself.
  284. *
  285. * Generally, properties that are changed by the element should be private or
  286. * protected fields and should use the `state: true` option. Properties
  287. * marked as `state` do not reflect from the corresponding attribute
  288. *
  289. * However, sometimes element code does need to set a public property. This
  290. * should typically only be done in response to user interaction, and an event
  291. * should be fired informing the user; for example, a checkbox sets its
  292. * `checked` property when clicked and fires a `changed` event. Mutating
  293. * public properties should typically not be done for non-primitive (object or
  294. * array) properties. In other cases when an element needs to manage state, a
  295. * private property set with the `state: true` option should be used. When
  296. * needed, state properties can be initialized via public properties to
  297. * facilitate complex interactions.
  298. * @nocollapse
  299. * @category properties
  300. */
  301. static properties: PropertyDeclarations;
  302. /**
  303. * Memoized list of all element styles.
  304. * Created lazily on user subclasses when finalizing the class.
  305. * @nocollapse
  306. * @category styles
  307. */
  308. static elementStyles: Array<CSSResultOrNative>;
  309. /**
  310. * Array of styles to apply to the element. The styles should be defined
  311. * using the {@linkcode css} tag function, via constructible stylesheets, or
  312. * imported from native CSS module scripts.
  313. *
  314. * Note on Content Security Policy:
  315. *
  316. * Element styles are implemented with `<style>` tags when the browser doesn't
  317. * support adopted StyleSheets. To use such `<style>` tags with the style-src
  318. * CSP directive, the style-src value must either include 'unsafe-inline' or
  319. * 'nonce-<base64-value>' with <base64-value> replaced be a server-generated
  320. * nonce.
  321. *
  322. * To provide a nonce to use on generated <style> elements, set
  323. * `window.litNonce` to a server-generated nonce in your page's HTML, before
  324. * loading application code:
  325. *
  326. * ```html
  327. * <script>
  328. * // Generated and unique per request:
  329. * window.litNonce = 'a1b2c3d4';
  330. * </script>
  331. * ```
  332. * @nocollapse
  333. * @category styles
  334. */
  335. static styles?: CSSResultGroup;
  336. /**
  337. * The set of properties defined by this class that caused an accessor to be
  338. * added during `createProperty`.
  339. * @nocollapse
  340. */
  341. private static __reactivePropertyKeys?;
  342. /**
  343. * Returns a list of attributes corresponding to the registered properties.
  344. * @nocollapse
  345. * @category attributes
  346. */
  347. static get observedAttributes(): string[];
  348. /**
  349. * Creates a property accessor on the element prototype if one does not exist
  350. * and stores a {@linkcode PropertyDeclaration} for the property with the
  351. * given options. The property setter calls the property's `hasChanged`
  352. * property option or uses a strict identity check to determine whether or not
  353. * to request an update.
  354. *
  355. * This method may be overridden to customize properties; however,
  356. * when doing so, it's important to call `super.createProperty` to ensure
  357. * the property is setup correctly. This method calls
  358. * `getPropertyDescriptor` internally to get a descriptor to install.
  359. * To customize what properties do when they are get or set, override
  360. * `getPropertyDescriptor`. To customize the options for a property,
  361. * implement `createProperty` like this:
  362. *
  363. * ```ts
  364. * static createProperty(name, options) {
  365. * options = Object.assign(options, {myOption: true});
  366. * super.createProperty(name, options);
  367. * }
  368. * ```
  369. *
  370. * @nocollapse
  371. * @category properties
  372. */
  373. static createProperty(name: PropertyKey, options?: PropertyDeclaration): void;
  374. /**
  375. * Returns a property descriptor to be defined on the given named property.
  376. * If no descriptor is returned, the property will not become an accessor.
  377. * For example,
  378. *
  379. * ```ts
  380. * class MyElement extends LitElement {
  381. * static getPropertyDescriptor(name, key, options) {
  382. * const defaultDescriptor =
  383. * super.getPropertyDescriptor(name, key, options);
  384. * const setter = defaultDescriptor.set;
  385. * return {
  386. * get: defaultDescriptor.get,
  387. * set(value) {
  388. * setter.call(this, value);
  389. * // custom action.
  390. * },
  391. * configurable: true,
  392. * enumerable: true
  393. * }
  394. * }
  395. * }
  396. * ```
  397. *
  398. * @nocollapse
  399. * @category properties
  400. */
  401. protected static getPropertyDescriptor(name: PropertyKey, key: string | symbol, options: PropertyDeclaration): PropertyDescriptor | undefined;
  402. /**
  403. * Returns the property options associated with the given property.
  404. * These options are defined with a `PropertyDeclaration` via the `properties`
  405. * object or the `@property` decorator and are registered in
  406. * `createProperty(...)`.
  407. *
  408. * Note, this method should be considered "final" and not overridden. To
  409. * customize the options for a given property, override
  410. * {@linkcode createProperty}.
  411. *
  412. * @nocollapse
  413. * @final
  414. * @category properties
  415. */
  416. static getPropertyOptions(name: PropertyKey): PropertyDeclaration<unknown, unknown>;
  417. /**
  418. * Creates property accessors for registered properties, sets up element
  419. * styling, and ensures any superclasses are also finalized. Returns true if
  420. * the element was finalized.
  421. * @nocollapse
  422. */
  423. protected static finalize(): boolean;
  424. /**
  425. * Options used when calling `attachShadow`. Set this property to customize
  426. * the options for the shadowRoot; for example, to create a closed
  427. * shadowRoot: `{mode: 'closed'}`.
  428. *
  429. * Note, these options are used in `createRenderRoot`. If this method
  430. * is customized, options should be respected if possible.
  431. * @nocollapse
  432. * @category rendering
  433. */
  434. static shadowRootOptions: ShadowRootInit;
  435. /**
  436. * Takes the styles the user supplied via the `static styles` property and
  437. * returns the array of styles to apply to the element.
  438. * Override this method to integrate into a style management system.
  439. *
  440. * Styles are deduplicated preserving the _last_ instance in the list. This
  441. * is a performance optimization to avoid duplicated styles that can occur
  442. * especially when composing via subclassing. The last item is kept to try
  443. * to preserve the cascade order with the assumption that it's most important
  444. * that last added styles override previous styles.
  445. *
  446. * @nocollapse
  447. * @category styles
  448. */
  449. protected static finalizeStyles(styles?: CSSResultGroup): Array<CSSResultOrNative>;
  450. /**
  451. * Node or ShadowRoot into which element DOM should be rendered. Defaults
  452. * to an open shadowRoot.
  453. * @category rendering
  454. */
  455. readonly renderRoot: HTMLElement | ShadowRoot;
  456. /**
  457. * Returns the property name for the given attribute `name`.
  458. * @nocollapse
  459. */
  460. private static __attributeNameForProperty;
  461. private __instanceProperties?;
  462. private __updatePromise;
  463. /**
  464. * True if there is a pending update as a result of calling `requestUpdate()`.
  465. * Should only be read.
  466. * @category updates
  467. */
  468. isUpdatePending: boolean;
  469. /**
  470. * Is set to `true` after the first update. The element code cannot assume
  471. * that `renderRoot` exists before the element `hasUpdated`.
  472. * @category updates
  473. */
  474. hasUpdated: boolean;
  475. /**
  476. * Map with keys of properties that should be reflected when updated.
  477. */
  478. private __reflectingProperties?;
  479. /**
  480. * Name of currently reflecting property
  481. */
  482. private __reflectingProperty;
  483. /**
  484. * Set of controllers.
  485. */
  486. private __controllers?;
  487. constructor();
  488. /**
  489. * Registers a `ReactiveController` to participate in the element's reactive
  490. * update cycle. The element automatically calls into any registered
  491. * controllers during its lifecycle callbacks.
  492. *
  493. * If the element is connected when `addController()` is called, the
  494. * controller's `hostConnected()` callback will be immediately called.
  495. * @category controllers
  496. */
  497. addController(controller: ReactiveController): void;
  498. /**
  499. * Removes a `ReactiveController` from the element.
  500. * @category controllers
  501. */
  502. removeController(controller: ReactiveController): void;
  503. /**
  504. * Fixes any properties set on the instance before upgrade time.
  505. * Otherwise these would shadow the accessor and break these properties.
  506. * The properties are stored in a Map which is played back after the
  507. * constructor runs. Note, on very old versions of Safari (<=9) or Chrome
  508. * (<=41), properties created for native platform properties like (`id` or
  509. * `name`) may not have default values set in the element constructor. On
  510. * these browsers native properties appear on instances and therefore their
  511. * default value will overwrite any element default (e.g. if the element sets
  512. * this.id = 'id' in the constructor, the 'id' will become '' since this is
  513. * the native platform default).
  514. */
  515. private __saveInstanceProperties;
  516. /**
  517. * Returns the node into which the element should render and by default
  518. * creates and returns an open shadowRoot. Implement to customize where the
  519. * element's DOM is rendered. For example, to render into the element's
  520. * childNodes, return `this`.
  521. *
  522. * @return Returns a node into which to render.
  523. * @category rendering
  524. */
  525. protected createRenderRoot(): Element | ShadowRoot;
  526. /**
  527. * On first connection, creates the element's renderRoot, sets up
  528. * element styling, and enables updating.
  529. * @category lifecycle
  530. */
  531. connectedCallback(): void;
  532. /**
  533. * Note, this method should be considered final and not overridden. It is
  534. * overridden on the element instance with a function that triggers the first
  535. * update.
  536. * @category updates
  537. */
  538. protected enableUpdating(_requestedUpdate: boolean): void;
  539. /**
  540. * Allows for `super.disconnectedCallback()` in extensions while
  541. * reserving the possibility of making non-breaking feature additions
  542. * when disconnecting at some point in the future.
  543. * @category lifecycle
  544. */
  545. disconnectedCallback(): void;
  546. /**
  547. * Synchronizes property values when attributes change.
  548. *
  549. * Specifically, when an attribute is set, the corresponding property is set.
  550. * You should rarely need to implement this callback. If this method is
  551. * overridden, `super.attributeChangedCallback(name, _old, value)` must be
  552. * called.
  553. *
  554. * See [using the lifecycle callbacks](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#using_the_lifecycle_callbacks)
  555. * on MDN for more information about the `attributeChangedCallback`.
  556. * @category attributes
  557. */
  558. attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
  559. private __propertyToAttribute;
  560. /**
  561. * Requests an update which is processed asynchronously. This should be called
  562. * when an element should update based on some state not triggered by setting
  563. * a reactive property. In this case, pass no arguments. It should also be
  564. * called when manually implementing a property setter. In this case, pass the
  565. * property `name` and `oldValue` to ensure that any configured property
  566. * options are honored.
  567. *
  568. * @param name name of requesting property
  569. * @param oldValue old value of requesting property
  570. * @param options property options to use instead of the previously
  571. * configured options
  572. * @category updates
  573. */
  574. requestUpdate(name?: PropertyKey, oldValue?: unknown, options?: PropertyDeclaration): void;
  575. /**
  576. * Sets up the element to asynchronously update.
  577. */
  578. private __enqueueUpdate;
  579. /**
  580. * Schedules an element update. You can override this method to change the
  581. * timing of updates by returning a Promise. The update will await the
  582. * returned Promise, and you should resolve the Promise to allow the update
  583. * to proceed. If this method is overridden, `super.scheduleUpdate()`
  584. * must be called.
  585. *
  586. * For instance, to schedule updates to occur just before the next frame:
  587. *
  588. * ```ts
  589. * override protected async scheduleUpdate(): Promise<unknown> {
  590. * await new Promise((resolve) => requestAnimationFrame(() => resolve()));
  591. * super.scheduleUpdate();
  592. * }
  593. * ```
  594. * @category updates
  595. */
  596. protected scheduleUpdate(): void | Promise<unknown>;
  597. /**
  598. * Performs an element update. Note, if an exception is thrown during the
  599. * update, `firstUpdated` and `updated` will not be called.
  600. *
  601. * Call `performUpdate()` to immediately process a pending update. This should
  602. * generally not be needed, but it can be done in rare cases when you need to
  603. * update synchronously.
  604. *
  605. * Note: To ensure `performUpdate()` synchronously completes a pending update,
  606. * it should not be overridden. In LitElement 2.x it was suggested to override
  607. * `performUpdate()` to also customizing update scheduling. Instead, you should now
  608. * override `scheduleUpdate()`. For backwards compatibility with LitElement 2.x,
  609. * scheduling updates via `performUpdate()` continues to work, but will make
  610. * also calling `performUpdate()` to synchronously process updates difficult.
  611. *
  612. * @category updates
  613. */
  614. protected performUpdate(): void | Promise<unknown>;
  615. /**
  616. * Invoked before `update()` to compute values needed during the update.
  617. *
  618. * Implement `willUpdate` to compute property values that depend on other
  619. * properties and are used in the rest of the update process.
  620. *
  621. * ```ts
  622. * willUpdate(changedProperties) {
  623. * // only need to check changed properties for an expensive computation.
  624. * if (changedProperties.has('firstName') || changedProperties.has('lastName')) {
  625. * this.sha = computeSHA(`${this.firstName} ${this.lastName}`);
  626. * }
  627. * }
  628. *
  629. * render() {
  630. * return html`SHA: ${this.sha}`;
  631. * }
  632. * ```
  633. *
  634. * @category updates
  635. */
  636. protected willUpdate(_changedProperties: PropertyValues): void;
  637. private __markUpdated;
  638. /**
  639. * Returns a Promise that resolves when the element has completed updating.
  640. * The Promise value is a boolean that is `true` if the element completed the
  641. * update without triggering another update. The Promise result is `false` if
  642. * a property was set inside `updated()`. If the Promise is rejected, an
  643. * exception was thrown during the update.
  644. *
  645. * To await additional asynchronous work, override the `getUpdateComplete`
  646. * method. For example, it is sometimes useful to await a rendered element
  647. * before fulfilling this Promise. To do this, first await
  648. * `super.getUpdateComplete()`, then any subsequent state.
  649. *
  650. * @return A promise of a boolean that resolves to true if the update completed
  651. * without triggering another update.
  652. * @category updates
  653. */
  654. get updateComplete(): Promise<boolean>;
  655. /**
  656. * Override point for the `updateComplete` promise.
  657. *
  658. * It is not safe to override the `updateComplete` getter directly due to a
  659. * limitation in TypeScript which means it is not possible to call a
  660. * superclass getter (e.g. `super.updateComplete.then(...)`) when the target
  661. * language is ES5 (https://github.com/microsoft/TypeScript/issues/338).
  662. * This method should be overridden instead. For example:
  663. *
  664. * ```ts
  665. * class MyElement extends LitElement {
  666. * override async getUpdateComplete() {
  667. * const result = await super.getUpdateComplete();
  668. * await this._myChild.updateComplete;
  669. * return result;
  670. * }
  671. * }
  672. * ```
  673. *
  674. * @return A promise of a boolean that resolves to true if the update completed
  675. * without triggering another update.
  676. * @category updates
  677. */
  678. protected getUpdateComplete(): Promise<boolean>;
  679. /**
  680. * Controls whether or not `update()` should be called when the element requests
  681. * an update. By default, this method always returns `true`, but this can be
  682. * customized to control when to update.
  683. *
  684. * @param _changedProperties Map of changed properties with old values
  685. * @category updates
  686. */
  687. protected shouldUpdate(_changedProperties: PropertyValues): boolean;
  688. /**
  689. * Updates the element. This method reflects property values to attributes.
  690. * It can be overridden to render and keep updated element DOM.
  691. * Setting properties inside this method will *not* trigger
  692. * another update.
  693. *
  694. * @param _changedProperties Map of changed properties with old values
  695. * @category updates
  696. */
  697. protected update(_changedProperties: PropertyValues): void;
  698. /**
  699. * Invoked whenever the element is updated. Implement to perform
  700. * post-updating tasks via DOM APIs, for example, focusing an element.
  701. *
  702. * Setting properties inside this method will trigger the element to update
  703. * again after this update cycle completes.
  704. *
  705. * @param _changedProperties Map of changed properties with old values
  706. * @category updates
  707. */
  708. protected updated(_changedProperties: PropertyValues): void;
  709. /**
  710. * Invoked when the element is first updated. Implement to perform one time
  711. * work on the element after update.
  712. *
  713. * ```ts
  714. * firstUpdated() {
  715. * this.renderRoot.getElementById('my-text-area').focus();
  716. * }
  717. * ```
  718. *
  719. * Setting properties inside this method will trigger the element to update
  720. * again after this update cycle completes.
  721. *
  722. * @param _changedProperties Map of changed properties with old values
  723. * @category updates
  724. */
  725. protected firstUpdated(_changedProperties: PropertyValues): void;
  726. }
  727. //# sourceMappingURL=reactive-element.d.ts.map