reactive-element.d.ts 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765
  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. 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. * When `true`, uses the initial value of the property as the default value,
  121. * which changes how attributes are handled:
  122. * - The initial value does *not* reflect, even if the `reflect` option is `true`.
  123. * Subsequent changes to the property will reflect, even if they are equal to the
  124. * default value.
  125. * - When the attribute is removed, the property is set to the default value
  126. * - The initial value will not trigger an old value in the `changedProperties` map
  127. * argument to update lifecycle methods.
  128. *
  129. * When set, properties must be initialized, either with a field initializer, or an
  130. * assignment in the constructor. Not initializing the property may lead to
  131. * improper handling of subsequent property assignments.
  132. *
  133. * While this behavior is opt-in, most properties that reflect to attributes should
  134. * use `useDefault: true` so that their initial values do not reflect.
  135. */
  136. useDefault?: boolean;
  137. }
  138. /**
  139. * Map of properties to PropertyDeclaration options. For each property an
  140. * accessor is made, and the property is processed according to the
  141. * PropertyDeclaration options.
  142. */
  143. export interface PropertyDeclarations {
  144. readonly [key: string]: PropertyDeclaration;
  145. }
  146. type PropertyDeclarationMap = Map<PropertyKey, PropertyDeclaration>;
  147. /**
  148. * A Map of property keys to values.
  149. *
  150. * Takes an optional type parameter T, which when specified as a non-any,
  151. * non-unknown type, will make the Map more strongly-typed, associating the map
  152. * keys with their corresponding value type on T.
  153. *
  154. * Use `PropertyValues<this>` when overriding ReactiveElement.update() and
  155. * other lifecycle methods in order to get stronger type-checking on keys
  156. * and values.
  157. */
  158. export type PropertyValues<T = any> = T extends object ? PropertyValueMap<T> : Map<PropertyKey, unknown>;
  159. /**
  160. * Do not use, instead prefer {@linkcode PropertyValues}.
  161. */
  162. export interface PropertyValueMap<T> extends Map<PropertyKey, unknown> {
  163. get<K extends keyof T>(k: K): T[K] | undefined;
  164. set<K extends keyof T>(key: K, value: T[K]): this;
  165. has<K extends keyof T>(k: K): boolean;
  166. delete<K extends keyof T>(k: K): boolean;
  167. }
  168. export declare const defaultConverter: ComplexAttributeConverter;
  169. export interface HasChanged {
  170. (value: unknown, old: unknown): boolean;
  171. }
  172. /**
  173. * Change function that returns true if `value` is different from `oldValue`.
  174. * This method is used as the default for a property's `hasChanged` function.
  175. */
  176. export declare const notEqual: HasChanged;
  177. /**
  178. * A string representing one of the supported dev mode warning categories.
  179. */
  180. export type WarningKind = 'change-in-update' | 'migration' | 'async-perform-update';
  181. export type Initializer = (element: ReactiveElement) => void;
  182. declare global {
  183. interface SymbolConstructor {
  184. readonly metadata: unique symbol;
  185. }
  186. }
  187. declare global {
  188. var litPropertyMetadata: WeakMap<object, Map<PropertyKey, PropertyDeclaration>>;
  189. }
  190. /**
  191. * Base element class which manages element properties and attributes. When
  192. * properties change, the `update` method is asynchronously called. This method
  193. * should be supplied by subclasses to render updates as desired.
  194. * @noInheritDoc
  195. */
  196. export declare abstract class ReactiveElement extends HTMLElement implements ReactiveControllerHost {
  197. /**
  198. * Read or set all the enabled warning categories for this class.
  199. *
  200. * This property is only used in development builds.
  201. *
  202. * @nocollapse
  203. * @category dev-mode
  204. */
  205. static enabledWarnings?: WarningKind[];
  206. /**
  207. * Enable the given warning category for this class.
  208. *
  209. * This method only exists in development builds, so it should be accessed
  210. * with a guard like:
  211. *
  212. * ```ts
  213. * // Enable for all ReactiveElement subclasses
  214. * ReactiveElement.enableWarning?.('migration');
  215. *
  216. * // Enable for only MyElement and subclasses
  217. * MyElement.enableWarning?.('migration');
  218. * ```
  219. *
  220. * @nocollapse
  221. * @category dev-mode
  222. */
  223. static enableWarning?: (warningKind: WarningKind) => void;
  224. /**
  225. * Disable the given warning category for this class.
  226. *
  227. * This method only exists in development builds, so it should be accessed
  228. * with a guard like:
  229. *
  230. * ```ts
  231. * // Disable for all ReactiveElement subclasses
  232. * ReactiveElement.disableWarning?.('migration');
  233. *
  234. * // Disable for only MyElement and subclasses
  235. * MyElement.disableWarning?.('migration');
  236. * ```
  237. *
  238. * @nocollapse
  239. * @category dev-mode
  240. */
  241. static disableWarning?: (warningKind: WarningKind) => void;
  242. /**
  243. * Adds an initializer function to the class that is called during instance
  244. * construction.
  245. *
  246. * This is useful for code that runs against a `ReactiveElement`
  247. * subclass, such as a decorator, that needs to do work for each
  248. * instance, such as setting up a `ReactiveController`.
  249. *
  250. * ```ts
  251. * const myDecorator = (target: typeof ReactiveElement, key: string) => {
  252. * target.addInitializer((instance: ReactiveElement) => {
  253. * // This is run during construction of the element
  254. * new MyController(instance);
  255. * });
  256. * }
  257. * ```
  258. *
  259. * Decorating a field will then cause each instance to run an initializer
  260. * that adds a controller:
  261. *
  262. * ```ts
  263. * class MyElement extends LitElement {
  264. * @myDecorator foo;
  265. * }
  266. * ```
  267. *
  268. * Initializers are stored per-constructor. Adding an initializer to a
  269. * subclass does not add it to a superclass. Since initializers are run in
  270. * constructors, initializers will run in order of the class hierarchy,
  271. * starting with superclasses and progressing to the instance's class.
  272. *
  273. * @nocollapse
  274. */
  275. static addInitializer(initializer: Initializer): void;
  276. static _initializers?: Initializer[];
  277. /**
  278. * Maps attribute names to properties; for example `foobar` attribute to
  279. * `fooBar` property. Created lazily on user subclasses when finalizing the
  280. * class.
  281. * @nocollapse
  282. */
  283. private static __attributeToPropertyMap;
  284. /**
  285. * Marks class as having been finalized, which includes creating properties
  286. * from `static properties`, but does *not* include all properties created
  287. * from decorators.
  288. * @nocollapse
  289. */
  290. protected static finalized: true | undefined;
  291. /**
  292. * Memoized list of all element properties, including any superclass
  293. * properties. Created lazily on user subclasses when finalizing the class.
  294. *
  295. * @nocollapse
  296. * @category properties
  297. */
  298. static elementProperties: PropertyDeclarationMap;
  299. /**
  300. * User-supplied object that maps property names to `PropertyDeclaration`
  301. * objects containing options for configuring reactive properties. When
  302. * a reactive property is set the element will update and render.
  303. *
  304. * By default properties are public fields, and as such, they should be
  305. * considered as primarily settable by element users, either via attribute or
  306. * the property itself.
  307. *
  308. * Generally, properties that are changed by the element should be private or
  309. * protected fields and should use the `state: true` option. Properties
  310. * marked as `state` do not reflect from the corresponding attribute
  311. *
  312. * However, sometimes element code does need to set a public property. This
  313. * should typically only be done in response to user interaction, and an event
  314. * should be fired informing the user; for example, a checkbox sets its
  315. * `checked` property when clicked and fires a `changed` event. Mutating
  316. * public properties should typically not be done for non-primitive (object or
  317. * array) properties. In other cases when an element needs to manage state, a
  318. * private property set with the `state: true` option should be used. When
  319. * needed, state properties can be initialized via public properties to
  320. * facilitate complex interactions.
  321. * @nocollapse
  322. * @category properties
  323. */
  324. static properties: PropertyDeclarations;
  325. /**
  326. * Memoized list of all element styles.
  327. * Created lazily on user subclasses when finalizing the class.
  328. * @nocollapse
  329. * @category styles
  330. */
  331. static elementStyles: Array<CSSResultOrNative>;
  332. /**
  333. * Array of styles to apply to the element. The styles should be defined
  334. * using the {@linkcode css} tag function, via constructible stylesheets, or
  335. * imported from native CSS module scripts.
  336. *
  337. * Note on Content Security Policy:
  338. *
  339. * Element styles are implemented with `<style>` tags when the browser doesn't
  340. * support adopted StyleSheets. To use such `<style>` tags with the style-src
  341. * CSP directive, the style-src value must either include 'unsafe-inline' or
  342. * `nonce-<base64-value>` with `<base64-value>` replaced be a server-generated
  343. * nonce.
  344. *
  345. * To provide a nonce to use on generated `<style>` elements, set
  346. * `window.litNonce` to a server-generated nonce in your page's HTML, before
  347. * loading application code:
  348. *
  349. * ```html
  350. * <script>
  351. * // Generated and unique per request:
  352. * window.litNonce = 'a1b2c3d4';
  353. * </script>
  354. * ```
  355. * @nocollapse
  356. * @category styles
  357. */
  358. static styles?: CSSResultGroup;
  359. /**
  360. * Returns a list of attributes corresponding to the registered properties.
  361. * @nocollapse
  362. * @category attributes
  363. */
  364. static get observedAttributes(): string[];
  365. private __instanceProperties?;
  366. /**
  367. * Creates a property accessor on the element prototype if one does not exist
  368. * and stores a {@linkcode PropertyDeclaration} for the property with the
  369. * given options. The property setter calls the property's `hasChanged`
  370. * property option or uses a strict identity check to determine whether or not
  371. * to request an update.
  372. *
  373. * This method may be overridden to customize properties; however,
  374. * when doing so, it's important to call `super.createProperty` to ensure
  375. * the property is setup correctly. This method calls
  376. * `getPropertyDescriptor` internally to get a descriptor to install.
  377. * To customize what properties do when they are get or set, override
  378. * `getPropertyDescriptor`. To customize the options for a property,
  379. * implement `createProperty` like this:
  380. *
  381. * ```ts
  382. * static createProperty(name, options) {
  383. * options = Object.assign(options, {myOption: true});
  384. * super.createProperty(name, options);
  385. * }
  386. * ```
  387. *
  388. * @nocollapse
  389. * @category properties
  390. */
  391. static createProperty(name: PropertyKey, options?: PropertyDeclaration): void;
  392. /**
  393. * Returns a property descriptor to be defined on the given named property.
  394. * If no descriptor is returned, the property will not become an accessor.
  395. * For example,
  396. *
  397. * ```ts
  398. * class MyElement extends LitElement {
  399. * static getPropertyDescriptor(name, key, options) {
  400. * const defaultDescriptor =
  401. * super.getPropertyDescriptor(name, key, options);
  402. * const setter = defaultDescriptor.set;
  403. * return {
  404. * get: defaultDescriptor.get,
  405. * set(value) {
  406. * setter.call(this, value);
  407. * // custom action.
  408. * },
  409. * configurable: true,
  410. * enumerable: true
  411. * }
  412. * }
  413. * }
  414. * ```
  415. *
  416. * @nocollapse
  417. * @category properties
  418. */
  419. protected static getPropertyDescriptor(name: PropertyKey, key: string | symbol, options: PropertyDeclaration): PropertyDescriptor | undefined;
  420. /**
  421. * Returns the property options associated with the given property.
  422. * These options are defined with a `PropertyDeclaration` via the `properties`
  423. * object or the `@property` decorator and are registered in
  424. * `createProperty(...)`.
  425. *
  426. * Note, this method should be considered "final" and not overridden. To
  427. * customize the options for a given property, override
  428. * {@linkcode createProperty}.
  429. *
  430. * @nocollapse
  431. * @final
  432. * @category properties
  433. */
  434. static getPropertyOptions(name: PropertyKey): PropertyDeclaration<unknown, unknown>;
  435. static [Symbol.metadata]: object & Record<PropertyKey, unknown>;
  436. /**
  437. * Initializes static own properties of the class used in bookkeeping
  438. * for element properties, initializers, etc.
  439. *
  440. * Can be called multiple times by code that needs to ensure these
  441. * properties exist before using them.
  442. *
  443. * This method ensures the superclass is finalized so that inherited
  444. * property metadata can be copied down.
  445. * @nocollapse
  446. */
  447. private static __prepare;
  448. /**
  449. * Finishes setting up the class so that it's ready to be registered
  450. * as a custom element and instantiated.
  451. *
  452. * This method is called by the ReactiveElement.observedAttributes getter.
  453. * If you override the observedAttributes getter, you must either call
  454. * super.observedAttributes to trigger finalization, or call finalize()
  455. * yourself.
  456. *
  457. * @nocollapse
  458. */
  459. protected static finalize(): void;
  460. /**
  461. * Options used when calling `attachShadow`. Set this property to customize
  462. * the options for the shadowRoot; for example, to create a closed
  463. * shadowRoot: `{mode: 'closed'}`.
  464. *
  465. * Note, these options are used in `createRenderRoot`. If this method
  466. * is customized, options should be respected if possible.
  467. * @nocollapse
  468. * @category rendering
  469. */
  470. static shadowRootOptions: ShadowRootInit;
  471. /**
  472. * Takes the styles the user supplied via the `static styles` property and
  473. * returns the array of styles to apply to the element.
  474. * Override this method to integrate into a style management system.
  475. *
  476. * Styles are deduplicated preserving the _last_ instance in the list. This
  477. * is a performance optimization to avoid duplicated styles that can occur
  478. * especially when composing via subclassing. The last item is kept to try
  479. * to preserve the cascade order with the assumption that it's most important
  480. * that last added styles override previous styles.
  481. *
  482. * @nocollapse
  483. * @category styles
  484. */
  485. protected static finalizeStyles(styles?: CSSResultGroup): Array<CSSResultOrNative>;
  486. /**
  487. * Node or ShadowRoot into which element DOM should be rendered. Defaults
  488. * to an open shadowRoot.
  489. * @category rendering
  490. */
  491. readonly renderRoot: HTMLElement | DocumentFragment;
  492. /**
  493. * Returns the property name for the given attribute `name`.
  494. * @nocollapse
  495. */
  496. private static __attributeNameForProperty;
  497. private __updatePromise;
  498. /**
  499. * True if there is a pending update as a result of calling `requestUpdate()`.
  500. * Should only be read.
  501. * @category updates
  502. */
  503. isUpdatePending: boolean;
  504. /**
  505. * Is set to `true` after the first update. The element code cannot assume
  506. * that `renderRoot` exists before the element `hasUpdated`.
  507. * @category updates
  508. */
  509. hasUpdated: boolean;
  510. /**
  511. * Records property default values when the
  512. * `useDefault` option is used.
  513. */
  514. private __defaultValues?;
  515. /**
  516. * Properties that should be reflected when updated.
  517. */
  518. private __reflectingProperties?;
  519. /**
  520. * Name of currently reflecting property
  521. */
  522. private __reflectingProperty;
  523. /**
  524. * Set of controllers.
  525. */
  526. private __controllers?;
  527. constructor();
  528. /**
  529. * Internal only override point for customizing work done when elements
  530. * are constructed.
  531. */
  532. private __initialize;
  533. /**
  534. * Registers a `ReactiveController` to participate in the element's reactive
  535. * update cycle. The element automatically calls into any registered
  536. * controllers during its lifecycle callbacks.
  537. *
  538. * If the element is connected when `addController()` is called, the
  539. * controller's `hostConnected()` callback will be immediately called.
  540. * @category controllers
  541. */
  542. addController(controller: ReactiveController): void;
  543. /**
  544. * Removes a `ReactiveController` from the element.
  545. * @category controllers
  546. */
  547. removeController(controller: ReactiveController): void;
  548. /**
  549. * Fixes any properties set on the instance before upgrade time.
  550. * Otherwise these would shadow the accessor and break these properties.
  551. * The properties are stored in a Map which is played back after the
  552. * constructor runs.
  553. */
  554. private __saveInstanceProperties;
  555. /**
  556. * Returns the node into which the element should render and by default
  557. * creates and returns an open shadowRoot. Implement to customize where the
  558. * element's DOM is rendered. For example, to render into the element's
  559. * childNodes, return `this`.
  560. *
  561. * @return Returns a node into which to render.
  562. * @category rendering
  563. */
  564. protected createRenderRoot(): HTMLElement | DocumentFragment;
  565. /**
  566. * On first connection, creates the element's renderRoot, sets up
  567. * element styling, and enables updating.
  568. * @category lifecycle
  569. */
  570. connectedCallback(): void;
  571. /**
  572. * Note, this method should be considered final and not overridden. It is
  573. * overridden on the element instance with a function that triggers the first
  574. * update.
  575. * @category updates
  576. */
  577. protected enableUpdating(_requestedUpdate: boolean): void;
  578. /**
  579. * Allows for `super.disconnectedCallback()` in extensions while
  580. * reserving the possibility of making non-breaking feature additions
  581. * when disconnecting at some point in the future.
  582. * @category lifecycle
  583. */
  584. disconnectedCallback(): void;
  585. /**
  586. * Synchronizes property values when attributes change.
  587. *
  588. * Specifically, when an attribute is set, the corresponding property is set.
  589. * You should rarely need to implement this callback. If this method is
  590. * overridden, `super.attributeChangedCallback(name, _old, value)` must be
  591. * called.
  592. *
  593. * See [responding to attribute changes](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#responding_to_attribute_changes)
  594. * on MDN for more information about the `attributeChangedCallback`.
  595. * @category attributes
  596. */
  597. attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
  598. private __propertyToAttribute;
  599. /**
  600. * Requests an update which is processed asynchronously. This should be called
  601. * when an element should update based on some state not triggered by setting
  602. * a reactive property. In this case, pass no arguments. It should also be
  603. * called when manually implementing a property setter. In this case, pass the
  604. * property `name` and `oldValue` to ensure that any configured property
  605. * options are honored.
  606. *
  607. * @param name name of requesting property
  608. * @param oldValue old value of requesting property
  609. * @param options property options to use instead of the previously
  610. * configured options
  611. * @param useNewValue if true, the newValue argument is used instead of
  612. * reading the property value. This is important to use if the reactive
  613. * property is a standard private accessor, as opposed to a plain
  614. * property, since private members can't be dynamically read by name.
  615. * @param newValue the new value of the property. This is only used if
  616. * `useNewValue` is true.
  617. * @category updates
  618. */
  619. requestUpdate(name?: PropertyKey, oldValue?: unknown, options?: PropertyDeclaration, useNewValue?: boolean, newValue?: unknown): void;
  620. /**
  621. * Sets up the element to asynchronously update.
  622. */
  623. private __enqueueUpdate;
  624. /**
  625. * Schedules an element update. You can override this method to change the
  626. * timing of updates by returning a Promise. The update will await the
  627. * returned Promise, and you should resolve the Promise to allow the update
  628. * to proceed. If this method is overridden, `super.scheduleUpdate()`
  629. * must be called.
  630. *
  631. * For instance, to schedule updates to occur just before the next frame:
  632. *
  633. * ```ts
  634. * override protected async scheduleUpdate(): Promise<unknown> {
  635. * await new Promise((resolve) => requestAnimationFrame(() => resolve()));
  636. * super.scheduleUpdate();
  637. * }
  638. * ```
  639. * @category updates
  640. */
  641. protected scheduleUpdate(): void | Promise<unknown>;
  642. /**
  643. * Performs an element update. Note, if an exception is thrown during the
  644. * update, `firstUpdated` and `updated` will not be called.
  645. *
  646. * Call `performUpdate()` to immediately process a pending update. This should
  647. * generally not be needed, but it can be done in rare cases when you need to
  648. * update synchronously.
  649. *
  650. * @category updates
  651. */
  652. protected performUpdate(): void;
  653. /**
  654. * Invoked before `update()` to compute values needed during the update.
  655. *
  656. * Implement `willUpdate` to compute property values that depend on other
  657. * properties and are used in the rest of the update process.
  658. *
  659. * ```ts
  660. * willUpdate(changedProperties) {
  661. * // only need to check changed properties for an expensive computation.
  662. * if (changedProperties.has('firstName') || changedProperties.has('lastName')) {
  663. * this.sha = computeSHA(`${this.firstName} ${this.lastName}`);
  664. * }
  665. * }
  666. *
  667. * render() {
  668. * return html`SHA: ${this.sha}`;
  669. * }
  670. * ```
  671. *
  672. * @category updates
  673. */
  674. protected willUpdate(_changedProperties: PropertyValues): void;
  675. private __markUpdated;
  676. /**
  677. * Returns a Promise that resolves when the element has completed updating.
  678. * The Promise value is a boolean that is `true` if the element completed the
  679. * update without triggering another update. The Promise result is `false` if
  680. * a property was set inside `updated()`. If the Promise is rejected, an
  681. * exception was thrown during the update.
  682. *
  683. * To await additional asynchronous work, override the `getUpdateComplete`
  684. * method. For example, it is sometimes useful to await a rendered element
  685. * before fulfilling this Promise. To do this, first await
  686. * `super.getUpdateComplete()`, then any subsequent state.
  687. *
  688. * @return A promise of a boolean that resolves to true if the update completed
  689. * without triggering another update.
  690. * @category updates
  691. */
  692. get updateComplete(): Promise<boolean>;
  693. /**
  694. * Override point for the `updateComplete` promise.
  695. *
  696. * It is not safe to override the `updateComplete` getter directly due to a
  697. * limitation in TypeScript which means it is not possible to call a
  698. * superclass getter (e.g. `super.updateComplete.then(...)`) when the target
  699. * language is ES5 (https://github.com/microsoft/TypeScript/issues/338).
  700. * This method should be overridden instead. For example:
  701. *
  702. * ```ts
  703. * class MyElement extends LitElement {
  704. * override async getUpdateComplete() {
  705. * const result = await super.getUpdateComplete();
  706. * await this._myChild.updateComplete;
  707. * return result;
  708. * }
  709. * }
  710. * ```
  711. *
  712. * @return A promise of a boolean that resolves to true if the update completed
  713. * without triggering another update.
  714. * @category updates
  715. */
  716. protected getUpdateComplete(): Promise<boolean>;
  717. /**
  718. * Controls whether or not `update()` should be called when the element requests
  719. * an update. By default, this method always returns `true`, but this can be
  720. * customized to control when to update.
  721. *
  722. * @param _changedProperties Map of changed properties with old values
  723. * @category updates
  724. */
  725. protected shouldUpdate(_changedProperties: PropertyValues): boolean;
  726. /**
  727. * Updates the element. This method reflects property values to attributes.
  728. * It can be overridden to render and keep updated element DOM.
  729. * Setting properties inside this method will *not* trigger
  730. * another update.
  731. *
  732. * @param _changedProperties Map of changed properties with old values
  733. * @category updates
  734. */
  735. protected update(_changedProperties: PropertyValues): void;
  736. /**
  737. * Invoked whenever the element is updated. Implement to perform
  738. * post-updating tasks via DOM APIs, for example, focusing an element.
  739. *
  740. * Setting properties inside this method will trigger the element to update
  741. * again after this update cycle completes.
  742. *
  743. * @param _changedProperties Map of changed properties with old values
  744. * @category updates
  745. */
  746. protected updated(_changedProperties: PropertyValues): void;
  747. /**
  748. * Invoked when the element is first updated. Implement to perform one time
  749. * work on the element after update.
  750. *
  751. * ```ts
  752. * firstUpdated() {
  753. * this.renderRoot.getElementById('my-text-area').focus();
  754. * }
  755. * ```
  756. *
  757. * Setting properties inside this method will trigger the element to update
  758. * again after this update cycle completes.
  759. *
  760. * @param _changedProperties Map of changed properties with old values
  761. * @category updates
  762. */
  763. protected firstUpdated(_changedProperties: PropertyValues): void;
  764. }
  765. //# sourceMappingURL=reactive-element.d.ts.map