lit-element.js 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  1. /**
  2. * @license
  3. * Copyright 2017 Google LLC
  4. * SPDX-License-Identifier: BSD-3-Clause
  5. */
  6. var _a, _b, _c;
  7. /**
  8. * The main LitElement module, which defines the {@linkcode LitElement} base
  9. * class and related APIs.
  10. *
  11. * LitElement components can define a template and a set of observed
  12. * properties. Changing an observed property triggers a re-render of the
  13. * element.
  14. *
  15. * Import {@linkcode LitElement} and {@linkcode html} from this module to
  16. * create a component:
  17. *
  18. * ```js
  19. * import {LitElement, html} from 'lit-element';
  20. *
  21. * class MyElement extends LitElement {
  22. *
  23. * // Declare observed properties
  24. * static get properties() {
  25. * return {
  26. * adjective: {}
  27. * }
  28. * }
  29. *
  30. * constructor() {
  31. * this.adjective = 'awesome';
  32. * }
  33. *
  34. * // Define the element's template
  35. * render() {
  36. * return html`<p>your ${adjective} template here</p>`;
  37. * }
  38. * }
  39. *
  40. * customElements.define('my-element', MyElement);
  41. * ```
  42. *
  43. * `LitElement` extends {@linkcode ReactiveElement} and adds lit-html
  44. * templating. The `ReactiveElement` class is provided for users that want to
  45. * build their own custom element base classes that don't use lit-html.
  46. *
  47. * @packageDocumentation
  48. */
  49. import { ReactiveElement } from '@lit/reactive-element';
  50. import { render, noChange } from 'lit-html';
  51. export * from '@lit/reactive-element';
  52. export * from 'lit-html';
  53. // For backwards compatibility export ReactiveElement as UpdatingElement. Note,
  54. // IE transpilation requires exporting like this.
  55. export const UpdatingElement = ReactiveElement;
  56. const DEV_MODE = true;
  57. let issueWarning;
  58. if (DEV_MODE) {
  59. // Ensure warnings are issued only 1x, even if multiple versions of Lit
  60. // are loaded.
  61. const issuedWarnings = ((_a = globalThis.litIssuedWarnings) !== null && _a !== void 0 ? _a : (globalThis.litIssuedWarnings = new Set()));
  62. // Issue a warning, if we haven't already.
  63. issueWarning = (code, warning) => {
  64. warning += ` See https://lit.dev/msg/${code} for more information.`;
  65. if (!issuedWarnings.has(warning)) {
  66. console.warn(warning);
  67. issuedWarnings.add(warning);
  68. }
  69. };
  70. }
  71. /**
  72. * Base element class that manages element properties and attributes, and
  73. * renders a lit-html template.
  74. *
  75. * To define a component, subclass `LitElement` and implement a
  76. * `render` method to provide the component's template. Define properties
  77. * using the {@linkcode LitElement.properties properties} property or the
  78. * {@linkcode property} decorator.
  79. */
  80. export class LitElement extends ReactiveElement {
  81. constructor() {
  82. super(...arguments);
  83. /**
  84. * @category rendering
  85. */
  86. this.renderOptions = { host: this };
  87. this.__childPart = undefined;
  88. }
  89. /**
  90. * @category rendering
  91. */
  92. createRenderRoot() {
  93. var _a;
  94. var _b;
  95. const renderRoot = super.createRenderRoot();
  96. // When adoptedStyleSheets are shimmed, they are inserted into the
  97. // shadowRoot by createRenderRoot. Adjust the renderBefore node so that
  98. // any styles in Lit content render before adoptedStyleSheets. This is
  99. // important so that adoptedStyleSheets have precedence over styles in
  100. // the shadowRoot.
  101. (_a = (_b = this.renderOptions).renderBefore) !== null && _a !== void 0 ? _a : (_b.renderBefore = renderRoot.firstChild);
  102. return renderRoot;
  103. }
  104. /**
  105. * Updates the element. This method reflects property values to attributes
  106. * and calls `render` to render DOM via lit-html. Setting properties inside
  107. * this method will *not* trigger another update.
  108. * @param changedProperties Map of changed properties with old values
  109. * @category updates
  110. */
  111. update(changedProperties) {
  112. // Setting properties in `render` should not trigger an update. Since
  113. // updates are allowed after super.update, it's important to call `render`
  114. // before that.
  115. const value = this.render();
  116. if (!this.hasUpdated) {
  117. this.renderOptions.isConnected = this.isConnected;
  118. }
  119. super.update(changedProperties);
  120. this.__childPart = render(value, this.renderRoot, this.renderOptions);
  121. }
  122. /**
  123. * Invoked when the component is added to the document's DOM.
  124. *
  125. * In `connectedCallback()` you should setup tasks that should only occur when
  126. * the element is connected to the document. The most common of these is
  127. * adding event listeners to nodes external to the element, like a keydown
  128. * event handler added to the window.
  129. *
  130. * ```ts
  131. * connectedCallback() {
  132. * super.connectedCallback();
  133. * addEventListener('keydown', this._handleKeydown);
  134. * }
  135. * ```
  136. *
  137. * Typically, anything done in `connectedCallback()` should be undone when the
  138. * element is disconnected, in `disconnectedCallback()`.
  139. *
  140. * @category lifecycle
  141. */
  142. connectedCallback() {
  143. var _a;
  144. super.connectedCallback();
  145. (_a = this.__childPart) === null || _a === void 0 ? void 0 : _a.setConnected(true);
  146. }
  147. /**
  148. * Invoked when the component is removed from the document's DOM.
  149. *
  150. * This callback is the main signal to the element that it may no longer be
  151. * used. `disconnectedCallback()` should ensure that nothing is holding a
  152. * reference to the element (such as event listeners added to nodes external
  153. * to the element), so that it is free to be garbage collected.
  154. *
  155. * ```ts
  156. * disconnectedCallback() {
  157. * super.disconnectedCallback();
  158. * window.removeEventListener('keydown', this._handleKeydown);
  159. * }
  160. * ```
  161. *
  162. * An element may be re-connected after being disconnected.
  163. *
  164. * @category lifecycle
  165. */
  166. disconnectedCallback() {
  167. var _a;
  168. super.disconnectedCallback();
  169. (_a = this.__childPart) === null || _a === void 0 ? void 0 : _a.setConnected(false);
  170. }
  171. /**
  172. * Invoked on each update to perform rendering tasks. This method may return
  173. * any value renderable by lit-html's `ChildPart` - typically a
  174. * `TemplateResult`. Setting properties inside this method will *not* trigger
  175. * the element to update.
  176. * @category rendering
  177. */
  178. render() {
  179. return noChange;
  180. }
  181. }
  182. /**
  183. * Ensure this class is marked as `finalized` as an optimization ensuring
  184. * it will not needlessly try to `finalize`.
  185. *
  186. * Note this property name is a string to prevent breaking Closure JS Compiler
  187. * optimizations. See @lit/reactive-element for more information.
  188. */
  189. LitElement['finalized'] = true;
  190. // This property needs to remain unminified.
  191. LitElement['_$litElement$'] = true;
  192. // Install hydration if available
  193. (_b = globalThis.litElementHydrateSupport) === null || _b === void 0 ? void 0 : _b.call(globalThis, { LitElement });
  194. // Apply polyfills if available
  195. const polyfillSupport = DEV_MODE
  196. ? globalThis.litElementPolyfillSupportDevMode
  197. : globalThis.litElementPolyfillSupport;
  198. polyfillSupport === null || polyfillSupport === void 0 ? void 0 : polyfillSupport({ LitElement });
  199. // DEV mode warnings
  200. if (DEV_MODE) {
  201. /* eslint-disable @typescript-eslint/no-explicit-any */
  202. // Note, for compatibility with closure compilation, this access
  203. // needs to be as a string property index.
  204. LitElement['finalize'] = function () {
  205. const finalized = ReactiveElement.finalize.call(this);
  206. if (!finalized) {
  207. return false;
  208. }
  209. const warnRemovedOrRenamed = (obj, name, renamed = false) => {
  210. if (obj.hasOwnProperty(name)) {
  211. const ctorName = (typeof obj === 'function' ? obj : obj.constructor)
  212. .name;
  213. issueWarning(renamed ? 'renamed-api' : 'removed-api', `\`${name}\` is implemented on class ${ctorName}. It ` +
  214. `has been ${renamed ? 'renamed' : 'removed'} ` +
  215. `in this version of LitElement.`);
  216. }
  217. };
  218. warnRemovedOrRenamed(this, 'render');
  219. warnRemovedOrRenamed(this, 'getStyles', true);
  220. warnRemovedOrRenamed(this.prototype, 'adoptStyles');
  221. return true;
  222. };
  223. /* eslint-enable @typescript-eslint/no-explicit-any */
  224. }
  225. /**
  226. * END USERS SHOULD NOT RELY ON THIS OBJECT.
  227. *
  228. * Private exports for use by other Lit packages, not intended for use by
  229. * external users.
  230. *
  231. * We currently do not make a mangled rollup build of the lit-ssr code. In order
  232. * to keep a number of (otherwise private) top-level exports mangled in the
  233. * client side code, we export a _$LE object containing those members (or
  234. * helper methods for accessing private fields of those members), and then
  235. * re-export them for use in lit-ssr. This keeps lit-ssr agnostic to whether the
  236. * client-side code is being used in `dev` mode or `prod` mode.
  237. *
  238. * This has a unique name, to disambiguate it from private exports in
  239. * lit-html, since this module re-exports all of lit-html.
  240. *
  241. * @private
  242. */
  243. export const _$LE = {
  244. _$attributeToProperty: (el, name, value) => {
  245. // eslint-disable-next-line
  246. el._$attributeToProperty(name, value);
  247. },
  248. // eslint-disable-next-line
  249. _$changedProperties: (el) => el._$changedProperties,
  250. };
  251. // IMPORTANT: do not change the property name or the assignment expression.
  252. // This line will be used in regexes to search for LitElement usage.
  253. ((_c = globalThis.litElementVersions) !== null && _c !== void 0 ? _c : (globalThis.litElementVersions = [])).push('3.2.0');
  254. if (DEV_MODE && globalThis.litElementVersions.length > 1) {
  255. issueWarning('multiple-versions', `Multiple versions of Lit loaded. Loading multiple versions ` +
  256. `is not recommended.`);
  257. }
  258. //# sourceMappingURL=lit-element.js.map