Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

lit-element

Package Overview
Dependencies
Maintainers
11
Versions
84
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

lit-element - npm Package Compare versions

Comparing version 2.3.1 to 2.4.0-pre.1

ts3.4/test/lib/css-tag_test.d.ts

17

CHANGELOG.md

@@ -20,2 +20,18 @@ # Change Log

## [2.4.0] - 2020-08-12
### Added
* Adds a `cache: boolean` argument to the `@query` decorator as a performance optimization for properties whose queried element is not expected to change. If cache is set to true, element DOM is queried when the property is first accessed, and the value is cached so it can be immediately returned on all subsequent property accesses. ([#1013](https://github.com/Polymer/lit-element/issues/1013))
* Adds a `selector: string` argument to the `@queryAssignedNodes` decorator as a convenience to filter the assigned nodes by the given selector ([#1016](https://github.com/Polymer/lit-element/issues/1016)).
* The `requestUpdateInternal(name, oldValue, options)` method has been added. This method is sometimes useful to call in a custom property setter to optimize performance. It is slightly more efficient than `requestUpdate` since it does not return the `updateComplete` property which can be overridden to do work.
* The protected `performUpdate()` method may now be called to syncronously "flush" a pending update, for example via a property setter. Note, performing a synchronous update only updates the element and not any potentially pending descendants in the element's local DOM ([#959](https://github.com/Polymer/lit-element/issues/959)).
* Constructible stylesheets may now be provided directly as styles, in addition to using the `css` tagged template function ([#853](https://github.com/Polymer/lit-element/issues/853)).
### Fixed
* queryAssignedNodes doesn't correctly locate default slot ([#1002](https://github.com/Polymer/lit-element/issues/1002))
## [2.3.1] - 2020-03-19

@@ -37,2 +53,3 @@

* Added `getStyles()` to `LitElement` to allow hooks into style gathering for component sets [#866](https://github.com/Polymer/lit-element/pull/866).
* Added `@internalProperty(options)` decorator to define properties internal to an element. [#881](https://github.com/Polymer/lit-element/pull/881).

@@ -39,0 +56,0 @@ ### Fixed

13

lib/css-tag.d.ts

@@ -11,2 +11,5 @@ /**

*/
/**
* Whether the current browser supports `adoptedStyleSheets`.
*/
export declare const supportsAdoptingStyleSheets: boolean;

@@ -21,3 +24,3 @@ export declare class CSSResult {

/**
* Wrap a value for interpolation in a css tagged template literal.
* Wrap a value for interpolation in a [[`css`]] tagged template literal.
*

@@ -30,8 +33,8 @@ * This is unsafe because untrusted CSS text can be used to phone home

/**
* Template tag which which can be used with LitElement's `style` property to
* set element styles. For security reasons, only literal string values may be
* used. To incorporate non-literal values `unsafeCSS` may be used inside a
* template string part.
* Template tag which which can be used with LitElement's [[LitElement.styles |
* `styles`]] property to set element styles. For security reasons, only literal
* string values may be used. To incorporate non-literal values [[`unsafeCSS`]]
* may be used inside a template string part.
*/
export declare const css: (strings: TemplateStringsArray, ...values: (number | CSSResult)[]) => CSSResult;
//# sourceMappingURL=css-tag.d.ts.map

@@ -11,3 +11,8 @@ /**

*/
export const supportsAdoptingStyleSheets = ('adoptedStyleSheets' in Document.prototype) &&
/**
* Whether the current browser supports `adoptedStyleSheets`.
*/
export const supportsAdoptingStyleSheets = (window.ShadowRoot) &&
(window.ShadyCSS === undefined || window.ShadyCSS.nativeShadow) &&
('adoptedStyleSheets' in Document.prototype) &&
('replace' in CSSStyleSheet.prototype);

@@ -26,4 +31,4 @@ const constructionToken = Symbol();

if (this._styleSheet === undefined) {
// Note, if `adoptedStyleSheets` is supported then we assume CSSStyleSheet
// is constructable.
// Note, if `supportsAdoptingStyleSheets` is true then we assume
// CSSStyleSheet is constructable.
if (supportsAdoptingStyleSheets) {

@@ -44,3 +49,3 @@ this._styleSheet = new CSSStyleSheet();

/**
* Wrap a value for interpolation in a css tagged template literal.
* Wrap a value for interpolation in a [[`css`]] tagged template literal.
*

@@ -67,6 +72,6 @@ * This is unsafe because untrusted CSS text can be used to phone home

/**
* Template tag which which can be used with LitElement's `style` property to
* set element styles. For security reasons, only literal string values may be
* used. To incorporate non-literal values `unsafeCSS` may be used inside a
* template string part.
* Template tag which which can be used with LitElement's [[LitElement.styles |
* `styles`]] property to set element styles. For security reasons, only literal
* string values may be used. To incorporate non-literal values [[`unsafeCSS`]]
* may be used inside a template string part.
*/

@@ -73,0 +78,0 @@ export const css = (strings, ...values) => {

@@ -43,3 +43,3 @@ /**

* ```
*
* @category Decorator
* @param tagName The name of the custom element to define.

@@ -50,15 +50,16 @@ */

* A property decorator which creates a LitElement property which reflects a
* corresponding attribute value. A `PropertyDeclaration` may optionally be
* corresponding attribute value. A [[`PropertyDeclaration`]] may optionally be
* supplied to configure property features.
*
* This decorator should only be used for public fields. Private or protected
* fields should use the internalProperty decorator.
* fields should use the [[`internalProperty`]] decorator.
*
* @example
*
* class MyElement {
* @property({ type: Boolean })
* clicked = false;
* }
*
* ```ts
* class MyElement {
* @property({ type: Boolean })
* clicked = false;
* }
* ```
* @category Decorator
* @ExportDecoratedItems

@@ -82,2 +83,3 @@ */

* properties may be renamed by optimization tools like closure compiler.
* @category Decorator
*/

@@ -90,2 +92,4 @@ export declare function internalProperty(options?: InternalPropertyDeclaration): (protoOrDescriptor: Object | ClassElement, name?: string | number | symbol | undefined) => any;

* @param selector A DOMString containing one or more selectors to match.
* @param cache An optional boolean which when true performs the DOM query only
* once and caches the result.
*

@@ -96,16 +100,18 @@ * See: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

*
* class MyElement {
* @query('#first')
* first;
* ```ts
* class MyElement {
* @query('#first')
* first;
*
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
*
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
* ```
* @category Decorator
*/
export declare function query(selector: string): (protoOrDescriptor: Object | ClassElement, name?: string | number | symbol | undefined) => any;
export declare function query(selector: string, cache?: boolean): (protoOrDescriptor: Object | ClassElement, name?: string | number | symbol | undefined) => any;
/**

@@ -124,19 +130,21 @@ * A property decorator that converts a class property into a getter that

* @example
* ```ts
* class MyElement {
* @queryAsync('#first')
* first;
*
* class MyElement {
* @queryAsync('#first')
* first;
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
*
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
*
* // external usage
* async doSomethingWithFirst() {
* (await aMyElement.first).doSomething();
* }
* // external usage
* async doSomethingWithFirst() {
* (await aMyElement.first).doSomething();
* }
* ```
* @category Decorator
*/

@@ -154,14 +162,16 @@ export declare function queryAsync(selector: string): (protoOrDescriptor: Object | ClassElement, name?: string | number | symbol | undefined) => any;

* @example
* ```ts
* class MyElement {
* @queryAll('div')
* divs;
*
* class MyElement {
* @queryAll('div')
* divs;
*
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
* ```
* @category Decorator
*/

@@ -180,19 +190,21 @@ export declare function queryAll(selector: string): (protoOrDescriptor: Object | ClassElement, name?: string | number | symbol | undefined) => any;

* @example
* ```ts
* class MyElement {
* clicked = false;
*
* class MyElement {
* clicked = false;
* render() {
* return html`
* <div @click=${this._onClick}`>
* <button></button>
* </div>
* `;
* }
*
* render() {
* return html`
* <div @click=${this._onClick}`>
* <button></button>
* </div>
* `;
* }
*
* @eventOptions({capture: true})
* _onClick(e) {
* this.clicked = true;
* }
* }
* @eventOptions({capture: true})
* _onClick(e) {
* this.clicked = true;
* }
* }
* ```
* @category Decorator
*/

@@ -205,5 +217,26 @@ export declare function eventOptions(options: AddEventListenerOptions): any;

*
* @param slotName A string name of the slot.
* @param flatten A boolean which when true flattens the assigned nodes,
* meaning any assigned nodes that are slot elements are replaced with their
* assigned nodes.
* @param selector A string which filters the results to elements that match
* the given css selector.
*
* * @example
* ```ts
* class MyElement {
* @queryAssignedNodes('list', true, '.item')
* listItems;
*
* render() {
* return html`
* <slot name="list"></slot>
* `;
* }
* }
* ```
* @category Decorator
*/
export declare function queryAssignedNodes(slotName?: string, flatten?: boolean): (protoOrDescriptor: Object | ClassElement, name?: string | number | symbol | undefined) => any;
export declare function queryAssignedNodes(slotName?: string, flatten?: boolean, selector?: string): (protoOrDescriptor: Object | ClassElement, name?: string | number | symbol | undefined) => any;
export {};
//# sourceMappingURL=decorators.d.ts.map

@@ -46,3 +46,3 @@ /**

* ```
*
* @category Decorator
* @param tagName The name of the custom element to define.

@@ -98,15 +98,16 @@ */

* A property decorator which creates a LitElement property which reflects a
* corresponding attribute value. A `PropertyDeclaration` may optionally be
* corresponding attribute value. A [[`PropertyDeclaration`]] may optionally be
* supplied to configure property features.
*
* This decorator should only be used for public fields. Private or protected
* fields should use the internalProperty decorator.
* fields should use the [[`internalProperty`]] decorator.
*
* @example
*
* class MyElement {
* @property({ type: Boolean })
* clicked = false;
* }
*
* ```ts
* class MyElement {
* @property({ type: Boolean })
* clicked = false;
* }
* ```
* @category Decorator
* @ExportDecoratedItems

@@ -127,2 +128,3 @@ */

* properties may be renamed by optimization tools like closure compiler.
* @category Decorator
*/

@@ -137,2 +139,4 @@ export function internalProperty(options) {

* @param selector A DOMString containing one or more selectors to match.
* @param cache An optional boolean which when true performs the DOM query only
* once and caches the result.
*

@@ -143,16 +147,18 @@ * See: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

*
* class MyElement {
* @query('#first')
* first;
* ```ts
* class MyElement {
* @query('#first')
* first;
*
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
*
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
* ```
* @category Decorator
*/
export function query(selector) {
export function query(selector, cache) {
return (protoOrDescriptor,

@@ -168,2 +174,12 @@ // tslint:disable-next-line:no-any decorator

};
if (cache) {
const key = typeof name === 'symbol' ? Symbol() : `__${name}`;
descriptor.get = function () {
if (this[key] === undefined) {
(this[key] =
this.renderRoot.querySelector(selector));
}
return this[key];
};
}
return (name !== undefined) ?

@@ -192,19 +208,21 @@ legacyQuery(descriptor, protoOrDescriptor, name) :

* @example
* ```ts
* class MyElement {
* @queryAsync('#first')
* first;
*
* class MyElement {
* @queryAsync('#first')
* first;
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
*
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
*
* // external usage
* async doSomethingWithFirst() {
* (await aMyElement.first).doSomething();
* }
* // external usage
* async doSomethingWithFirst() {
* (await aMyElement.first).doSomething();
* }
* ```
* @category Decorator
*/

@@ -238,14 +256,16 @@ export function queryAsync(selector) {

* @example
* ```ts
* class MyElement {
* @queryAll('div')
* divs;
*
* class MyElement {
* @queryAll('div')
* divs;
*
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
* ```
* @category Decorator
*/

@@ -298,19 +318,21 @@ export function queryAll(selector) {

* @example
* ```ts
* class MyElement {
* clicked = false;
*
* class MyElement {
* clicked = false;
* render() {
* return html`
* <div @click=${this._onClick}`>
* <button></button>
* </div>
* `;
* }
*
* render() {
* return html`
* <div @click=${this._onClick}`>
* <button></button>
* </div>
* `;
* }
*
* @eventOptions({capture: true})
* _onClick(e) {
* this.clicked = true;
* }
* }
* @eventOptions({capture: true})
* _onClick(e) {
* this.clicked = true;
* }
* }
* ```
* @category Decorator
*/

@@ -327,2 +349,6 @@ export function eventOptions(options) {

}
// x-browser support for matches
// tslint:disable-next-line:no-any
const ElementProto = Element.prototype;
const legacyMatches = ElementProto.msMatchesSelector || ElementProto.webkitMatchesSelector;
/**

@@ -333,4 +359,25 @@ * A property decorator that converts a class property into a getter that

*
* @param slotName A string name of the slot.
* @param flatten A boolean which when true flattens the assigned nodes,
* meaning any assigned nodes that are slot elements are replaced with their
* assigned nodes.
* @param selector A string which filters the results to elements that match
* the given css selector.
*
* * @example
* ```ts
* class MyElement {
* @queryAssignedNodes('list', true, '.item')
* listItems;
*
* render() {
* return html`
* <slot name="list"></slot>
* `;
* }
* }
* ```
* @category Decorator
*/
export function queryAssignedNodes(slotName = '', flatten = false) {
export function queryAssignedNodes(slotName = '', flatten = false, selector = '') {
return (protoOrDescriptor,

@@ -341,5 +388,12 @@ // tslint:disable-next-line:no-any decorator

get() {
const selector = `slot${slotName ? `[name=${slotName}]` : ''}`;
const slot = this.renderRoot.querySelector(selector);
return slot && slot.assignedNodes({ flatten });
const slotSelector = `slot${slotName ? `[name=${slotName}]` : ':not([name])'}`;
const slot = this.renderRoot.querySelector(slotSelector);
let nodes = slot && slot.assignedNodes({ flatten });
if (nodes && selector) {
nodes = nodes.filter((node) => node.nodeType === Node.ELEMENT_NODE &&
node.matches ?
node.matches(selector) :
legacyMatches.call(node, selector));
}
return nodes;
},

@@ -346,0 +400,0 @@ enumerable: true,

@@ -127,2 +127,3 @@ /**

* should be supplied by subclassers to render updates as desired.
* @noInheritDoc
*/

@@ -209,3 +210,3 @@ export declare abstract class UpdatingElement extends HTMLElement {

*/
protected static getPropertyDescriptor(name: PropertyKey, key: string | symbol, _options: PropertyDeclaration): {
protected static getPropertyDescriptor(name: PropertyKey, key: string | symbol, options: PropertyDeclaration): {
get(): any;

@@ -264,3 +265,3 @@ set(this: UpdatingElement, value: unknown): void;

private _updateState;
private _instanceProperties;
private _instanceProperties?;
private _updatePromise;

@@ -276,3 +277,3 @@ private _enableUpdatingResolver;

*/
private _reflectingProperties;
private _reflectingProperties?;
constructor();

@@ -316,7 +317,7 @@ /**

/**
* This private version of `requestUpdate` does not access or return the
* This protected version of `requestUpdate` does not access or return the
* `updateComplete` promise. This promise can be overridden and is therefore
* not free to access.
*/
private _requestUpdate;
protected requestUpdateInternal(name?: PropertyKey, oldValue?: unknown, options?: PropertyDeclaration): void;
/**

@@ -323,0 +324,0 @@ * Requests an update which is processed asynchronously. This should

@@ -16,2 +16,7 @@ /**

/**
* Use this module if you want to create your own base class extending
* [[UpdatingElement]].
* @packageDocumentation
*/
/*
* When using Closure Compiler, JSCompiler_renameProperty(property, object) is

@@ -80,2 +85,3 @@ * replaced at compile time by the munged name for object[property]. We cannot

* should be supplied by subclassers to render updates as desired.
* @noInheritDoc
*/

@@ -85,16 +91,2 @@ export class UpdatingElement extends HTMLElement {

super();
this._updateState = 0;
this._instanceProperties = undefined;
// Initialize to an unresolved Promise so we can make sure the element has
// connected before first update.
this._updatePromise = new Promise((res) => this._enableUpdatingResolver = res);
/**
* Map with keys for any properties that have changed since the last
* update cycle with previous values.
*/
this._changedProperties = new Map();
/**
* Map with keys of properties that should be reflected when updated.
*/
this._reflectingProperties = undefined;
this.initialize();

@@ -204,3 +196,3 @@ }

*/
static getPropertyDescriptor(name, key, _options) {
static getPropertyDescriptor(name, key, options) {
return {

@@ -214,3 +206,4 @@ // tslint:disable-next-line:no-any no symbol in index

this[key] = value;
this._requestUpdate(name, oldValue);
this
.requestUpdateInternal(name, oldValue, options);
},

@@ -330,6 +323,10 @@ configurable: true,

initialize() {
this._updateState = 0;
this._updatePromise =
new Promise((res) => this._enableUpdatingResolver = res);
this._changedProperties = new Map();
this._saveInstanceProperties();
// ensures first update will be caught by an early access of
// `updateComplete`
this._requestUpdate();
this.requestUpdateInternal();
}

@@ -450,7 +447,7 @@ /**

/**
* This private version of `requestUpdate` does not access or return the
* This protected version of `requestUpdate` does not access or return the
* `updateComplete` promise. This promise can be overridden and is therefore
* not free to access.
*/
_requestUpdate(name, oldValue) {
requestUpdateInternal(name, oldValue, options) {
let shouldRequestUpdate = true;

@@ -460,3 +457,3 @@ // If we have a property key, perform property update steps.

const ctor = this.constructor;
const options = ctor.getPropertyOptions(name);
options = options || ctor.getPropertyOptions(name);
if (ctor._valueHasChanged(this[name], oldValue, options.hasChanged)) {

@@ -501,3 +498,3 @@ if (!this._changedProperties.has(name)) {

requestUpdate(name, oldValue) {
this._requestUpdate(name, oldValue);
this.requestUpdateInternal(name, oldValue);
return this.updateComplete;

@@ -551,2 +548,8 @@ }

performUpdate() {
// Abort any update if one is not pending when this is called.
// This can happen if `performUpdate` is called early to "flush"
// the update.
if (!this._hasRequestedUpdate) {
return;
}
// Mixin instance properties once, if they exist.

@@ -553,0 +556,0 @@ if (this._instanceProperties) {

@@ -14,2 +14,44 @@ /**

*/
/**
* The main LitElement module, which defines the [[`LitElement`]] base class and
* related APIs.
*
* LitElement components can define a template and a set of observed
* properties. Changing an observed property triggers a re-render of the
* element.
*
* Import [[`LitElement`]] and [[`html`]] from this module to create a
* component:
*
* ```js
* import {LitElement, html} from 'lit-element';
*
* class MyElement extends LitElement {
*
* // Declare observed properties
* static get properties() {
* return {
* adjective: {}
* }
* }
*
* constructor() {
* this.adjective = 'awesome';
* }
*
* // Define the element's template
* render() {
* return html`<p>your ${adjective} template here</p>`;
* }
* }
*
* customElements.define('my-element', MyElement);
* ```
*
* `LitElement` extends [[`UpdatingElement`]] and adds lit-html templating.
* The `UpdatingElement` class is provided for users that want to build
* their own custom element base classes that don't use lit-html.
*
* @packageDocumentation
*/
import { ShadyRenderOptions } from 'lit-html/lib/shady-render.js';

@@ -27,4 +69,13 @@ import { PropertyValues, UpdatingElement } from './lib/updating-element.js';

}
export interface CSSResultArray extends Array<CSSResult | CSSResultArray> {
export declare type CSSResultOrNative = CSSResult | CSSStyleSheet;
export interface CSSResultArray extends Array<CSSResultOrNative | CSSResultArray> {
}
/**
* Base element class that manages element properties and attributes, and
* renders a lit-html template.
*
* To define a component, subclass `LitElement` and implement a
* `render` method to provide the component's template. Define properties
* using the [[`properties`]] property or the [[`property`]] decorator.
*/
export declare class LitElement extends UpdatingElement {

@@ -40,6 +91,16 @@ /**

/**
* Render method used to render the value to the element's DOM.
* @param result The value to render.
* @param container Node into which to render.
* @param options Element name.
* Reference to the underlying library method used to render the element's
* DOM. By default, points to the `render` method from lit-html's shady-render
* module.
*
* **Most users will never need to touch this property.**
*
* This property should not be confused with the `render` instance method,
* which should be overridden to define a template for the element.
*
* Advanced users creating a new base class based on LitElement can override
* this property to point to a custom render method with a signature that
* matches [shady-render's `render`
* method](https://lit-html.polymer-project.org/api/modules/shady_render.html#render).
*
* @nocollapse

@@ -50,5 +111,5 @@ */

* Array of styles to apply to the element. The styles should be defined
* using the `css` tag function.
* using the [[`css`]] tag function or via constructible stylesheets.
*/
static styles?: CSSResult | CSSResultArray;
static styles?: CSSResultOrNative | CSSResultArray;
private static _styles;

@@ -61,3 +122,3 @@ /**

*/
static getStyles(): CSSResult | CSSResultArray | undefined;
static getStyles(): CSSResultOrNative | CSSResultArray | undefined;
/** @nocollapse */

@@ -72,5 +133,5 @@ private static _getUniqueStyles;

/**
* Performs element initialization. By default this calls `createRenderRoot`
* to create the element `renderRoot` node and captures any pre-set values for
* registered properties.
* Performs element initialization. By default this calls
* [[`createRenderRoot`]] to create the element [[`renderRoot`]] node and
* captures any pre-set values for registered properties.
*/

@@ -87,3 +148,3 @@ protected initialize(): void;

/**
* Applies styling to the element shadowRoot using the `static get styles`
* Applies styling to the element shadowRoot using the [[`styles`]]
* property. Styling will apply using `shadowRoot.adoptedStyleSheets` where

@@ -107,5 +168,5 @@ * available and will fallback otherwise. When Shadow DOM is polyfilled,

* Invoked on each update to perform rendering tasks. This method may return
* any value renderable by lit-html's NodePart - typically a TemplateResult.
* Setting properties inside this method will *not* trigger the element to
* update.
* any value renderable by lit-html's `NodePart` - typically a
* `TemplateResult`. Setting properties inside this method will *not* trigger
* the element to update.
*/

@@ -112,0 +173,0 @@ protected render(): unknown;

@@ -14,2 +14,44 @@ /**

*/
/**
* The main LitElement module, which defines the [[`LitElement`]] base class and
* related APIs.
*
* LitElement components can define a template and a set of observed
* properties. Changing an observed property triggers a re-render of the
* element.
*
* Import [[`LitElement`]] and [[`html`]] from this module to create a
* component:
*
* ```js
* import {LitElement, html} from 'lit-element';
*
* class MyElement extends LitElement {
*
* // Declare observed properties
* static get properties() {
* return {
* adjective: {}
* }
* }
*
* constructor() {
* this.adjective = 'awesome';
* }
*
* // Define the element's template
* render() {
* return html`<p>your ${adjective} template here</p>`;
* }
* }
*
* customElements.define('my-element', MyElement);
* ```
*
* `LitElement` extends [[`UpdatingElement`]] and adds lit-html templating.
* The `UpdatingElement` class is provided for users that want to build
* their own custom element base classes that don't use lit-html.
*
* @packageDocumentation
*/
import { render } from 'lit-html/lib/shady-render.js';

@@ -20,3 +62,3 @@ import { UpdatingElement } from './lib/updating-element.js';

export { html, svg, TemplateResult, SVGTemplateResult } from 'lit-html/lit-html.js';
import { supportsAdoptingStyleSheets } from './lib/css-tag.js';
import { supportsAdoptingStyleSheets, unsafeCSS } from './lib/css-tag.js';
export * from './lib/css-tag.js';

@@ -27,3 +69,3 @@ // IMPORTANT: do not change the property name or the assignment expression.

(window['litElementVersions'] || (window['litElementVersions'] = []))
.push('2.3.1');
.push('2.4.0-pre.1');
/**

@@ -34,2 +76,10 @@ * Sentinal value used to avoid calling lit-html's render function when

const renderNotImplemented = {};
/**
* Base element class that manages element properties and attributes, and
* renders a lit-html template.
*
* To define a component, subclass `LitElement` and implement a
* `render` method to provide the component's template. Define properties
* using the [[`properties`]] property or the [[`property`]] decorator.
*/
export class LitElement extends UpdatingElement {

@@ -58,6 +108,3 @@ /**

const userStyles = this.getStyles();
if (userStyles === undefined) {
this._styles = [];
}
else if (Array.isArray(userStyles)) {
if (Array.isArray(userStyles)) {
// De-duplicate styles preserving the _last_ instance in the set.

@@ -80,9 +127,27 @@ // This is a performance optimization to avoid duplicated styles that can

else {
this._styles = [userStyles];
this._styles = userStyles === undefined ? [] : [userStyles];
}
// Ensure that there are no invalid CSSStyleSheet instances here. They are
// invalid in two conditions.
// (1) the sheet is non-constructible (`sheet` of a HTMLStyleElement), but
// this is impossible to check except via .replaceSync or use
// (2) the ShadyCSS polyfill is enabled (:. supportsAdoptingStyleSheets is
// false)
this._styles = this._styles.map((s) => {
if (s instanceof CSSStyleSheet && !supportsAdoptingStyleSheets) {
// Flatten the cssText from the passed constructible stylesheet (or
// undetectable non-constructible stylesheet). The user might have
// expected to update their stylesheets over time, but the alternative
// is a crash.
const cssText = Array.prototype.slice.call(s.cssRules)
.reduce((css, rule) => css + rule.cssText, '');
return unsafeCSS(cssText);
}
return s;
});
}
/**
* Performs element initialization. By default this calls `createRenderRoot`
* to create the element `renderRoot` node and captures any pre-set values for
* registered properties.
* Performs element initialization. By default this calls
* [[`createRenderRoot`]] to create the element [[`renderRoot`]] node and
* captures any pre-set values for registered properties.
*/

@@ -92,4 +157,3 @@ initialize() {

this.constructor._getUniqueStyles();
this.renderRoot =
this.createRenderRoot();
this.renderRoot = this.createRenderRoot();
// Note, if renderRoot is not a shadowRoot, styles would/could apply to the

@@ -113,3 +177,3 @@ // element's getRootNode(). While this could be done, we're choosing not to

/**
* Applies styling to the element shadowRoot using the `static get styles`
* Applies styling to the element shadowRoot using the [[`styles`]]
* property. Styling will apply using `shadowRoot.adoptedStyleSheets` where

@@ -129,3 +193,3 @@ * available and will fallback otherwise. When Shadow DOM is polyfilled,

// (1) shadowRoot polyfilled: use ShadyCSS
// (2) shadowRoot.adoptedStyleSheets available: use it.
// (2) shadowRoot.adoptedStyleSheets available: use it
// (3) shadowRoot.adoptedStyleSheets polyfilled: append styles after

@@ -138,3 +202,3 @@ // rendering

this.renderRoot.adoptedStyleSheets =
styles.map((s) => s.styleSheet);
styles.map((s) => s instanceof CSSStyleSheet ? s : s.styleSheet);
}

@@ -186,5 +250,5 @@ else {

* Invoked on each update to perform rendering tasks. This method may return
* any value renderable by lit-html's NodePart - typically a TemplateResult.
* Setting properties inside this method will *not* trigger the element to
* update.
* any value renderable by lit-html's `NodePart` - typically a
* `TemplateResult`. Setting properties inside this method will *not* trigger
* the element to update.
*/

@@ -204,6 +268,16 @@ render() {

/**
* Render method used to render the value to the element's DOM.
* @param result The value to render.
* @param container Node into which to render.
* @param options Element name.
* Reference to the underlying library method used to render the element's
* DOM. By default, points to the `render` method from lit-html's shady-render
* module.
*
* **Most users will never need to touch this property.**
*
* This property should not be confused with the `render` instance method,
* which should be overridden to define a template for the element.
*
* Advanced users creating a new base class based on LitElement can override
* this property to point to a custom render method with a signature that
* matches [shady-render's `render`
* method](https://lit-html.polymer-project.org/api/modules/shady_render.html#render).
*
* @nocollapse

@@ -210,0 +284,0 @@ */

{
"name": "lit-element",
"version": "2.3.1",
"version": "2.4.0-pre.1",
"description": "A simple base class for creating fast, lightweight web components",

@@ -26,5 +26,7 @@ "license": "BSD-3-Clause",

"build": "tsc && downlevel-dts . ts3.4 && cp tsconfig.json ./ts3.4/",
"build:watch": "tsc --watch",
"build:babel-test": "babel src/test/lib/decorators_test.ts --out-file test/lib/decorators-babel_test.js",
"gen-docs": "typedoc --readme docs/_api/api-readme.md --tsconfig tsconfig_apidoc.json --mode modules --theme docs/_api/theme --excludeNotExported --excludePrivate --ignoreCompilerErrors --exclude '{**/*test*,**/node_modules/**,**/test/**}' --out ./docs/api --gaID UA-39334307-23 src/**/*.ts",
"gen-docs": "typedoc src/lit-element.ts src/lib/updating-element.ts",
"test": "npm run build && npm run build:babel-test && wct",
"quicktest": "wct -l chrome -p",
"checksize": "rollup -c ; rm lit-element.bundled.js",

@@ -61,3 +63,3 @@ "format": "find src test | grep '\\.js$\\|\\.ts$' | xargs clang-format --style=file -i",

"tslint": "^5.20.1",
"typedoc": "^0.14.2",
"typedoc": "^0.17.0-3",
"typescript": "~3.8.2",

@@ -64,0 +66,0 @@ "uglify-es": "^3.3.9",

@@ -12,3 +12,7 @@ /**

export const supportsAdoptingStyleSheets =
/**
* Whether the current browser supports `adoptedStyleSheets`.
*/
export const supportsAdoptingStyleSheets = (window.ShadowRoot) &&
(window.ShadyCSS === undefined || window.ShadyCSS.nativeShadow) &&
('adoptedStyleSheets' in Document.prototype) &&

@@ -29,2 +33,3 @@ ('replace' in CSSStyleSheet.prototype);

}
this.cssText = cssText;

@@ -37,4 +42,4 @@ }

if (this._styleSheet === undefined) {
// Note, if `adoptedStyleSheets` is supported then we assume CSSStyleSheet
// is constructable.
// Note, if `supportsAdoptingStyleSheets` is true then we assume
// CSSStyleSheet is constructable.
if (supportsAdoptingStyleSheets) {

@@ -56,3 +61,3 @@ this._styleSheet = new CSSStyleSheet();

/**
* Wrap a value for interpolation in a css tagged template literal.
* Wrap a value for interpolation in a [[`css`]] tagged template literal.
*

@@ -81,6 +86,6 @@ * This is unsafe because untrusted CSS text can be used to phone home

/**
* Template tag which which can be used with LitElement's `style` property to
* set element styles. For security reasons, only literal string values may be
* used. To incorporate non-literal values `unsafeCSS` may be used inside a
* template string part.
* Template tag which which can be used with LitElement's [[LitElement.styles |
* `styles`]] property to set element styles. For security reasons, only literal
* string values may be used. To incorporate non-literal values [[`unsafeCSS`]]
* may be used inside a template string part.
*/

@@ -87,0 +92,0 @@ export const css =

@@ -15,3 +15,3 @@ /**

/**
/*
* IMPORTANT: For compatibility with tsickle and the Closure JS compiler, all

@@ -86,3 +86,3 @@ * property decorators (but not class decorators) in this file that have

* ```
*
* @category Decorator
* @param tagName The name of the custom element to define.

@@ -147,15 +147,16 @@ */

* A property decorator which creates a LitElement property which reflects a
* corresponding attribute value. A `PropertyDeclaration` may optionally be
* corresponding attribute value. A [[`PropertyDeclaration`]] may optionally be
* supplied to configure property features.
*
* This decorator should only be used for public fields. Private or protected
* fields should use the internalProperty decorator.
* fields should use the [[`internalProperty`]] decorator.
*
* @example
*
* class MyElement {
* @property({ type: Boolean })
* clicked = false;
* }
*
* ```ts
* class MyElement {
* @property({ type: Boolean })
* clicked = false;
* }
* ```
* @category Decorator
* @ExportDecoratedItems

@@ -187,2 +188,3 @@ */

* properties may be renamed by optimization tools like closure compiler.
* @category Decorator
*/

@@ -198,2 +200,4 @@ export function internalProperty(options?: InternalPropertyDeclaration) {

* @param selector A DOMString containing one or more selectors to match.
* @param cache An optional boolean which when true performs the DOM query only
* once and caches the result.
*

@@ -204,16 +208,18 @@ * See: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

*
* class MyElement {
* @query('#first')
* first;
* ```ts
* class MyElement {
* @query('#first')
* first;
*
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
*
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
* ```
* @category Decorator
*/
export function query(selector: string) {
export function query(selector: string, cache?: boolean) {
return (protoOrDescriptor: Object|ClassElement,

@@ -229,2 +235,14 @@ // tslint:disable-next-line:no-any decorator

};
if (cache) {
const key = typeof name === 'symbol' ? Symbol() : `__${name}`;
descriptor.get = function(this: LitElement) {
if ((this as unknown as
{[key: string]: Element | null})[key as string] === undefined) {
((this as unknown as {[key: string]: Element | null})[key as string] =
this.renderRoot.querySelector(selector));
}
return (
this as unknown as {[key: string]: Element | null})[key as string];
};
}
return (name !== undefined) ?

@@ -254,19 +272,21 @@ legacyQuery(descriptor, protoOrDescriptor as Object, name) :

* @example
* ```ts
* class MyElement {
* @queryAsync('#first')
* first;
*
* class MyElement {
* @queryAsync('#first')
* first;
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
*
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
*
* // external usage
* async doSomethingWithFirst() {
* (await aMyElement.first).doSomething();
* }
* // external usage
* async doSomethingWithFirst() {
* (await aMyElement.first).doSomething();
* }
* ```
* @category Decorator
*/

@@ -301,14 +321,16 @@ export function queryAsync(selector: string) {

* @example
* ```ts
* class MyElement {
* @queryAll('div')
* divs;
*
* class MyElement {
* @queryAll('div')
* divs;
*
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
* ```
* @category Decorator
*/

@@ -373,19 +395,21 @@ export function queryAll(selector: string) {

* @example
* ```ts
* class MyElement {
* clicked = false;
*
* class MyElement {
* clicked = false;
* render() {
* return html`
* <div @click=${this._onClick}`>
* <button></button>
* </div>
* `;
* }
*
* render() {
* return html`
* <div @click=${this._onClick}`>
* <button></button>
* </div>
* `;
* }
*
* @eventOptions({capture: true})
* _onClick(e) {
* this.clicked = true;
* }
* }
* @eventOptions({capture: true})
* _onClick(e) {
* this.clicked = true;
* }
* }
* ```
* @category Decorator
*/

@@ -407,2 +431,8 @@ export function eventOptions(options: AddEventListenerOptions) {

// x-browser support for matches
// tslint:disable-next-line:no-any
const ElementProto = Element.prototype as any;
const legacyMatches =
ElementProto.msMatchesSelector || ElementProto.webkitMatchesSelector;
/**

@@ -413,5 +443,26 @@ * A property decorator that converts a class property into a getter that

*
* @param slotName A string name of the slot.
* @param flatten A boolean which when true flattens the assigned nodes,
* meaning any assigned nodes that are slot elements are replaced with their
* assigned nodes.
* @param selector A string which filters the results to elements that match
* the given css selector.
*
* * @example
* ```ts
* class MyElement {
* @queryAssignedNodes('list', true, '.item')
* listItems;
*
* render() {
* return html`
* <slot name="list"></slot>
* `;
* }
* }
* ```
* @category Decorator
*/
export function queryAssignedNodes(
slotName: string = '', flatten: boolean = false) {
slotName = '', flatten = false, selector = '') {
return (protoOrDescriptor: Object|ClassElement,

@@ -422,5 +473,14 @@ // tslint:disable-next-line:no-any decorator

get(this: LitElement) {
const selector = `slot${slotName ? `[name=${slotName}]` : ''}`;
const slot = this.renderRoot.querySelector(selector);
return slot && (slot as HTMLSlotElement).assignedNodes({flatten});
const slotSelector =
`slot${slotName ? `[name=${slotName}]` : ':not([name])'}`;
const slot = this.renderRoot.querySelector(slotSelector);
let nodes = slot && (slot as HTMLSlotElement).assignedNodes({flatten});
if (nodes && selector) {
nodes = nodes.filter(
(node) => node.nodeType === Node.ELEMENT_NODE &&
(node as Element).matches ?
(node as Element).matches(selector) :
legacyMatches.call(node as Element, selector));
}
return nodes;
},

@@ -427,0 +487,0 @@ enumerable: true,

@@ -16,2 +16,8 @@ /**

/**
* Use this module if you want to create your own base class extending
* [[UpdatingElement]].
* @packageDocumentation
*/
/*
* When using Closure Compiler, JSCompiler_renameProperty(property, object) is

@@ -211,2 +217,3 @@ * replaced at compile time by the munged name for object[property]. We cannot

* should be supplied by subclassers to render updates as desired.
* @noInheritDoc
*/

@@ -356,3 +363,3 @@ export abstract class UpdatingElement extends HTMLElement {

protected static getPropertyDescriptor(
name: PropertyKey, key: string|symbol, _options: PropertyDeclaration) {
name: PropertyKey, key: string|symbol, options: PropertyDeclaration) {
return {

@@ -367,3 +374,4 @@ // tslint:disable-next-line:no-any no symbol in index

(this as {} as {[key: string]: unknown})[key as string] = value;
(this as unknown as UpdatingElement)._requestUpdate(name, oldValue);
(this as unknown as UpdatingElement)
.requestUpdateInternal(name, oldValue, options);
},

@@ -491,8 +499,7 @@ configurable: true,

private _updateState: UpdateState = 0;
private _instanceProperties: PropertyValues|undefined = undefined;
private _updateState!: UpdateState;
private _instanceProperties?: PropertyValues;
// Initialize to an unresolved Promise so we can make sure the element has
// connected before first update.
private _updatePromise =
new Promise((res) => this._enableUpdatingResolver = res);
private _updatePromise!: Promise<unknown>;
private _enableUpdatingResolver: (() => void)|undefined;

@@ -504,3 +511,3 @@

*/
private _changedProperties: PropertyValues = new Map();
private _changedProperties!: PropertyValues;

@@ -510,4 +517,3 @@ /**

*/
private _reflectingProperties: Map<PropertyKey, PropertyDeclaration>|
undefined = undefined;
private _reflectingProperties?: Map<PropertyKey, PropertyDeclaration>;

@@ -524,6 +530,10 @@ constructor() {

protected initialize() {
this._updateState = 0;
this._updatePromise =
new Promise((res) => this._enableUpdatingResolver = res);
this._changedProperties = new Map();
this._saveInstanceProperties();
// ensures first update will be caught by an early access of
// `updateComplete`
this._requestUpdate();
this.requestUpdateInternal();
}

@@ -654,7 +664,8 @@

/**
* This private version of `requestUpdate` does not access or return the
* This protected version of `requestUpdate` does not access or return the
* `updateComplete` promise. This promise can be overridden and is therefore
* not free to access.
*/
private _requestUpdate(name?: PropertyKey, oldValue?: unknown) {
protected requestUpdateInternal(
name?: PropertyKey, oldValue?: unknown, options?: PropertyDeclaration) {
let shouldRequestUpdate = true;

@@ -664,3 +675,3 @@ // If we have a property key, perform property update steps.

const ctor = this.constructor as typeof UpdatingElement;
const options = ctor.getPropertyOptions(name);
options = options || ctor.getPropertyOptions(name);
if (ctor._valueHasChanged(

@@ -706,3 +717,3 @@ this[name as keyof this], oldValue, options.hasChanged)) {

requestUpdate(name?: PropertyKey, oldValue?: unknown) {
this._requestUpdate(name, oldValue);
this.requestUpdateInternal(name, oldValue);
return this.updateComplete;

@@ -759,2 +770,8 @@ }

protected performUpdate(): void|Promise<unknown> {
// Abort any update if one is not pending when this is called.
// This can happen if `performUpdate` is called early to "flush"
// the update.
if (!this._hasRequestedUpdate) {
return;
}
// Mixin instance properties once, if they exist.

@@ -761,0 +778,0 @@ if (this._instanceProperties) {

@@ -14,2 +14,45 @@ /**

*/
/**
* The main LitElement module, which defines the [[`LitElement`]] base class and
* related APIs.
*
* LitElement components can define a template and a set of observed
* properties. Changing an observed property triggers a re-render of the
* element.
*
* Import [[`LitElement`]] and [[`html`]] from this module to create a
* component:
*
* ```js
* import {LitElement, html} from 'lit-element';
*
* class MyElement extends LitElement {
*
* // Declare observed properties
* static get properties() {
* return {
* adjective: {}
* }
* }
*
* constructor() {
* this.adjective = 'awesome';
* }
*
* // Define the element's template
* render() {
* return html`<p>your ${adjective} template here</p>`;
* }
* }
*
* customElements.define('my-element', MyElement);
* ```
*
* `LitElement` extends [[`UpdatingElement`]] and adds lit-html templating.
* The `UpdatingElement` class is provided for users that want to build
* their own custom element base classes that don't use lit-html.
*
* @packageDocumentation
*/
import {render, ShadyRenderOptions} from 'lit-html/lib/shady-render.js';

@@ -22,3 +65,3 @@

export {html, svg, TemplateResult, SVGTemplateResult} from 'lit-html/lit-html.js';
import {supportsAdoptingStyleSheets, CSSResult} from './lib/css-tag.js';
import {supportsAdoptingStyleSheets, CSSResult, unsafeCSS} from './lib/css-tag.js';
export * from './lib/css-tag.js';

@@ -36,6 +79,9 @@

(window['litElementVersions'] || (window['litElementVersions'] = []))
.push('2.3.1');
.push('2.4.0-pre.1');
export interface CSSResultArray extends Array<CSSResult|CSSResultArray> {}
export type CSSResultOrNative = CSSResult|CSSStyleSheet;
export interface CSSResultArray extends
Array<CSSResultOrNative|CSSResultArray> {}
/**

@@ -47,2 +93,10 @@ * Sentinal value used to avoid calling lit-html's render function when

/**
* Base element class that manages element properties and attributes, and
* renders a lit-html template.
*
* To define a component, subclass `LitElement` and implement a
* `render` method to provide the component's template. Define properties
* using the [[`properties`]] property or the [[`property`]] decorator.
*/
export class LitElement extends UpdatingElement {

@@ -59,6 +113,16 @@ /**

/**
* Render method used to render the value to the element's DOM.
* @param result The value to render.
* @param container Node into which to render.
* @param options Element name.
* Reference to the underlying library method used to render the element's
* DOM. By default, points to the `render` method from lit-html's shady-render
* module.
*
* **Most users will never need to touch this property.**
*
* This property should not be confused with the `render` instance method,
* which should be overridden to define a template for the element.
*
* Advanced users creating a new base class based on LitElement can override
* this property to point to a custom render method with a signature that
* matches [shady-render's `render`
* method](https://lit-html.polymer-project.org/api/modules/shady_render.html#render).
*
* @nocollapse

@@ -72,7 +136,7 @@ */

* Array of styles to apply to the element. The styles should be defined
* using the `css` tag function.
* using the [[`css`]] tag function or via constructible stylesheets.
*/
static styles?: CSSResult|CSSResultArray;
static styles?: CSSResultOrNative|CSSResultArray;
private static _styles: CSSResult[]|undefined;
private static _styles: Array<CSSResultOrNative|CSSResult>|undefined;

@@ -85,3 +149,3 @@ /**

*/
static getStyles(): CSSResult|CSSResultArray|undefined {
static getStyles(): CSSResultOrNative|CSSResultArray|undefined {
return this.styles;

@@ -103,5 +167,4 @@ }

const userStyles = this.getStyles();
if (userStyles === undefined) {
this._styles = [];
} else if (Array.isArray(userStyles)) {
if (Array.isArray(userStyles)) {
// De-duplicate styles preserving the _last_ instance in the set.

@@ -113,18 +176,36 @@ // This is a performance optimization to avoid duplicated styles that can

// previous styles.
const addStyles =
(styles: CSSResultArray, set: Set<CSSResult>): Set<CSSResult> =>
styles.reduceRight(
(set: Set<CSSResult>, s) =>
// Note: On IE set.add() does not return the set
Array.isArray(s) ? addStyles(s, set) : (set.add(s), set),
set);
const addStyles = (styles: CSSResultArray, set: Set<CSSResultOrNative>):
Set<CSSResultOrNative> => styles.reduceRight(
(set: Set<CSSResultOrNative>, s) =>
// Note: On IE set.add() does not return the set
Array.isArray(s) ? addStyles(s, set) : (set.add(s), set),
set);
// Array.from does not work on Set in IE, otherwise return
// Array.from(addStyles(userStyles, new Set<CSSResult>())).reverse()
const set = addStyles(userStyles, new Set<CSSResult>());
const styles: CSSResult[] = [];
const set = addStyles(userStyles, new Set<CSSResultOrNative>());
const styles: CSSResultOrNative[] = [];
set.forEach((v) => styles.unshift(v));
this._styles = styles;
} else {
this._styles = [userStyles];
this._styles = userStyles === undefined ? [] : [userStyles];
}
// Ensure that there are no invalid CSSStyleSheet instances here. They are
// invalid in two conditions.
// (1) the sheet is non-constructible (`sheet` of a HTMLStyleElement), but
// this is impossible to check except via .replaceSync or use
// (2) the ShadyCSS polyfill is enabled (:. supportsAdoptingStyleSheets is
// false)
this._styles = this._styles.map((s) => {
if (s instanceof CSSStyleSheet && !supportsAdoptingStyleSheets) {
// Flatten the cssText from the passed constructible stylesheet (or
// undetectable non-constructible stylesheet). The user might have
// expected to update their stylesheets over time, but the alternative
// is a crash.
const cssText = Array.prototype.slice.call(s.cssRules)
.reduce((css, rule) => css + rule.cssText, '');
return unsafeCSS(cssText);
}
return s;
});
}

@@ -141,5 +222,5 @@

/**
* Performs element initialization. By default this calls `createRenderRoot`
* to create the element `renderRoot` node and captures any pre-set values for
* registered properties.
* Performs element initialization. By default this calls
* [[`createRenderRoot`]] to create the element [[`renderRoot`]] node and
* captures any pre-set values for registered properties.
*/

@@ -149,4 +230,5 @@ protected initialize() {

(this.constructor as typeof LitElement)._getUniqueStyles();
(this as {renderRoot: Element | DocumentFragment}).renderRoot =
this.createRenderRoot();
(this as {
renderRoot: Element|DocumentFragment;
}).renderRoot = this.createRenderRoot();
// Note, if renderRoot is not a shadowRoot, styles would/could apply to the

@@ -172,3 +254,3 @@ // element's getRootNode(). While this could be done, we're choosing not to

/**
* Applies styling to the element shadowRoot using the `static get styles`
* Applies styling to the element shadowRoot using the [[`styles`]]
* property. Styling will apply using `shadowRoot.adoptedStyleSheets` where

@@ -188,3 +270,3 @@ * available and will fallback otherwise. When Shadow DOM is polyfilled,

// (1) shadowRoot polyfilled: use ShadyCSS
// (2) shadowRoot.adoptedStyleSheets available: use it.
// (2) shadowRoot.adoptedStyleSheets available: use it
// (3) shadowRoot.adoptedStyleSheets polyfilled: append styles after

@@ -197,3 +279,3 @@ // rendering

(this.renderRoot as ShadowRoot).adoptedStyleSheets =
styles.map((s) => s.styleSheet!);
styles.map((s) => s instanceof CSSStyleSheet ? s : s.styleSheet!);
} else {

@@ -250,5 +332,5 @@ // This must be done after rendering so the actual style insertion is done

* Invoked on each update to perform rendering tasks. This method may return
* any value renderable by lit-html's NodePart - typically a TemplateResult.
* Setting properties inside this method will *not* trigger the element to
* update.
* any value renderable by lit-html's `NodePart` - typically a
* `TemplateResult`. Setting properties inside this method will *not* trigger
* the element to update.
*/

@@ -255,0 +337,0 @@ protected render(): unknown {

@@ -11,2 +11,5 @@ /**

*/
/**
* Whether the current browser supports `adoptedStyleSheets`.
*/
export declare const supportsAdoptingStyleSheets: boolean;

@@ -21,3 +24,3 @@ export declare class CSSResult {

/**
* Wrap a value for interpolation in a css tagged template literal.
* Wrap a value for interpolation in a [[`css`]] tagged template literal.
*

@@ -30,8 +33,8 @@ * This is unsafe because untrusted CSS text can be used to phone home

/**
* Template tag which which can be used with LitElement's `style` property to
* set element styles. For security reasons, only literal string values may be
* used. To incorporate non-literal values `unsafeCSS` may be used inside a
* template string part.
* Template tag which which can be used with LitElement's [[LitElement.styles |
* `styles`]] property to set element styles. For security reasons, only literal
* string values may be used. To incorporate non-literal values [[`unsafeCSS`]]
* may be used inside a template string part.
*/
export declare const css: (strings: TemplateStringsArray, ...values: (number | CSSResult)[]) => CSSResult;
//# sourceMappingURL=css-tag.d.ts.map

@@ -43,3 +43,3 @@ /**

* ```
*
* @category Decorator
* @param tagName The name of the custom element to define.

@@ -50,15 +50,16 @@ */

* A property decorator which creates a LitElement property which reflects a
* corresponding attribute value. A `PropertyDeclaration` may optionally be
* corresponding attribute value. A [[`PropertyDeclaration`]] may optionally be
* supplied to configure property features.
*
* This decorator should only be used for public fields. Private or protected
* fields should use the internalProperty decorator.
* fields should use the [[`internalProperty`]] decorator.
*
* @example
*
* class MyElement {
* @property({ type: Boolean })
* clicked = false;
* }
*
* ```ts
* class MyElement {
* @property({ type: Boolean })
* clicked = false;
* }
* ```
* @category Decorator
* @ExportDecoratedItems

@@ -82,2 +83,3 @@ */

* properties may be renamed by optimization tools like closure compiler.
* @category Decorator
*/

@@ -90,2 +92,4 @@ export declare function internalProperty(options?: InternalPropertyDeclaration): (protoOrDescriptor: Object | ClassElement, name?: string | number | symbol | undefined) => any;

* @param selector A DOMString containing one or more selectors to match.
* @param cache An optional boolean which when true performs the DOM query only
* once and caches the result.
*

@@ -96,16 +100,18 @@ * See: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

*
* class MyElement {
* @query('#first')
* first;
* ```ts
* class MyElement {
* @query('#first')
* first;
*
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
*
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
* ```
* @category Decorator
*/
export declare function query(selector: string): (protoOrDescriptor: Object | ClassElement, name?: string | number | symbol | undefined) => any;
export declare function query(selector: string, cache?: boolean): (protoOrDescriptor: Object | ClassElement, name?: string | number | symbol | undefined) => any;
/**

@@ -124,19 +130,21 @@ * A property decorator that converts a class property into a getter that

* @example
* ```ts
* class MyElement {
* @queryAsync('#first')
* first;
*
* class MyElement {
* @queryAsync('#first')
* first;
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
*
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
*
* // external usage
* async doSomethingWithFirst() {
* (await aMyElement.first).doSomething();
* }
* // external usage
* async doSomethingWithFirst() {
* (await aMyElement.first).doSomething();
* }
* ```
* @category Decorator
*/

@@ -154,14 +162,16 @@ export declare function queryAsync(selector: string): (protoOrDescriptor: Object | ClassElement, name?: string | number | symbol | undefined) => any;

* @example
* ```ts
* class MyElement {
* @queryAll('div')
* divs;
*
* class MyElement {
* @queryAll('div')
* divs;
*
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
* ```
* @category Decorator
*/

@@ -180,19 +190,21 @@ export declare function queryAll(selector: string): (protoOrDescriptor: Object | ClassElement, name?: string | number | symbol | undefined) => any;

* @example
* ```ts
* class MyElement {
* clicked = false;
*
* class MyElement {
* clicked = false;
* render() {
* return html`
* <div @click=${this._onClick}`>
* <button></button>
* </div>
* `;
* }
*
* render() {
* return html`
* <div @click=${this._onClick}`>
* <button></button>
* </div>
* `;
* }
*
* @eventOptions({capture: true})
* _onClick(e) {
* this.clicked = true;
* }
* }
* @eventOptions({capture: true})
* _onClick(e) {
* this.clicked = true;
* }
* }
* ```
* @category Decorator
*/

@@ -205,5 +217,26 @@ export declare function eventOptions(options: AddEventListenerOptions): any;

*
* @param slotName A string name of the slot.
* @param flatten A boolean which when true flattens the assigned nodes,
* meaning any assigned nodes that are slot elements are replaced with their
* assigned nodes.
* @param selector A string which filters the results to elements that match
* the given css selector.
*
* * @example
* ```ts
* class MyElement {
* @queryAssignedNodes('list', true, '.item')
* listItems;
*
* render() {
* return html`
* <slot name="list"></slot>
* `;
* }
* }
* ```
* @category Decorator
*/
export declare function queryAssignedNodes(slotName?: string, flatten?: boolean): (protoOrDescriptor: Object | ClassElement, name?: string | number | symbol | undefined) => any;
export declare function queryAssignedNodes(slotName?: string, flatten?: boolean, selector?: string): (protoOrDescriptor: Object | ClassElement, name?: string | number | symbol | undefined) => any;
export {};
//# sourceMappingURL=decorators.d.ts.map

@@ -127,2 +127,3 @@ /**

* should be supplied by subclassers to render updates as desired.
* @noInheritDoc
*/

@@ -150,2 +151,6 @@ export declare abstract class UpdatingElement extends HTMLElement {

static properties: PropertyDeclarations;
/*
* Returns a list of attributes corresponding to the registered properties.
* @nocollapse
*/
static readonly observedAttributes: string[];

@@ -206,3 +211,3 @@ /**

*/
protected static getPropertyDescriptor(name: PropertyKey, key: string | symbol, _options: PropertyDeclaration): {
protected static getPropertyDescriptor(name: PropertyKey, key: string | symbol, options: PropertyDeclaration): {
get(): any;

@@ -261,3 +266,3 @@ set(this: UpdatingElement, value: unknown): void;

private _updateState;
private _instanceProperties;
private _instanceProperties?;
private _updatePromise;

@@ -273,3 +278,3 @@ private _enableUpdatingResolver;

*/
private _reflectingProperties;
private _reflectingProperties?;
constructor();

@@ -313,7 +318,7 @@ /**

/**
* This private version of `requestUpdate` does not access or return the
* This protected version of `requestUpdate` does not access or return the
* `updateComplete` promise. This promise can be overridden and is therefore
* not free to access.
*/
private _requestUpdate;
protected requestUpdateInternal(name?: PropertyKey, oldValue?: unknown, options?: PropertyDeclaration): void;
/**

@@ -357,2 +362,17 @@ * Requests an update which is processed asynchronously. This should

private _markUpdated;
/*
* Returns a Promise that resolves when the element has completed updating.
* The Promise value is a boolean that is `true` if the element completed the
* update without triggering another update. The Promise result is `false` if
* a property was set inside `updated()`. If the Promise is rejected, an
* exception was thrown during the update.
*
* To await additional asynchronous work, override the `_getUpdateComplete`
* method. For example, it is sometimes useful to await a rendered element
* before fulfilling this Promise. To do this, first await
* `super._getUpdateComplete()`, then any subsequent state.
*
* @returns {Promise} The Promise returns a boolean that indicates if the
* update resolved without triggering another update.
*/
readonly updateComplete: Promise<unknown>;

@@ -359,0 +379,0 @@ /**

@@ -14,2 +14,44 @@ /**

*/
/**
* The main LitElement module, which defines the [[`LitElement`]] base class and
* related APIs.
*
* LitElement components can define a template and a set of observed
* properties. Changing an observed property triggers a re-render of the
* element.
*
* Import [[`LitElement`]] and [[`html`]] from this module to create a
* component:
*
* ```js
* import {LitElement, html} from 'lit-element';
*
* class MyElement extends LitElement {
*
* // Declare observed properties
* static get properties() {
* return {
* adjective: {}
* }
* }
*
* constructor() {
* this.adjective = 'awesome';
* }
*
* // Define the element's template
* render() {
* return html`<p>your ${adjective} template here</p>`;
* }
* }
*
* customElements.define('my-element', MyElement);
* ```
*
* `LitElement` extends [[`UpdatingElement`]] and adds lit-html templating.
* The `UpdatingElement` class is provided for users that want to build
* their own custom element base classes that don't use lit-html.
*
* @packageDocumentation
*/
import { ShadyRenderOptions } from 'lit-html/lib/shady-render.js';

@@ -27,4 +69,13 @@ import { PropertyValues, UpdatingElement } from './lib/updating-element.js';

}
export interface CSSResultArray extends Array<CSSResult | CSSResultArray> {
export declare type CSSResultOrNative = CSSResult | CSSStyleSheet;
export interface CSSResultArray extends Array<CSSResultOrNative | CSSResultArray> {
}
/**
* Base element class that manages element properties and attributes, and
* renders a lit-html template.
*
* To define a component, subclass `LitElement` and implement a
* `render` method to provide the component's template. Define properties
* using the [[`properties`]] property or the [[`property`]] decorator.
*/
export declare class LitElement extends UpdatingElement {

@@ -40,6 +91,16 @@ /**

/**
* Render method used to render the value to the element's DOM.
* @param result The value to render.
* @param container Node into which to render.
* @param options Element name.
* Reference to the underlying library method used to render the element's
* DOM. By default, points to the `render` method from lit-html's shady-render
* module.
*
* **Most users will never need to touch this property.**
*
* This property should not be confused with the `render` instance method,
* which should be overridden to define a template for the element.
*
* Advanced users creating a new base class based on LitElement can override
* this property to point to a custom render method with a signature that
* matches [shady-render's `render`
* method](https://lit-html.polymer-project.org/api/modules/shady_render.html#render).
*
* @nocollapse

@@ -50,5 +111,5 @@ */

* Array of styles to apply to the element. The styles should be defined
* using the `css` tag function.
* using the [[`css`]] tag function or via constructible stylesheets.
*/
static styles?: CSSResult | CSSResultArray;
static styles?: CSSResultOrNative | CSSResultArray;
private static _styles;

@@ -61,3 +122,3 @@ /**

*/
static getStyles(): CSSResult | CSSResultArray | undefined;
static getStyles(): CSSResultOrNative | CSSResultArray | undefined;
/** @nocollapse */

@@ -72,5 +133,5 @@ private static _getUniqueStyles;

/**
* Performs element initialization. By default this calls `createRenderRoot`
* to create the element `renderRoot` node and captures any pre-set values for
* registered properties.
* Performs element initialization. By default this calls
* [[`createRenderRoot`]] to create the element [[`renderRoot`]] node and
* captures any pre-set values for registered properties.
*/

@@ -87,3 +148,3 @@ protected initialize(): void;

/**
* Applies styling to the element shadowRoot using the `static get styles`
* Applies styling to the element shadowRoot using the [[`styles`]]
* property. Styling will apply using `shadowRoot.adoptedStyleSheets` where

@@ -107,5 +168,5 @@ * available and will fallback otherwise. When Shadow DOM is polyfilled,

* Invoked on each update to perform rendering tasks. This method may return
* any value renderable by lit-html's NodePart - typically a TemplateResult.
* Setting properties inside this method will *not* trigger the element to
* update.
* any value renderable by lit-html's `NodePart` - typically a
* `TemplateResult`. Setting properties inside this method will *not* trigger
* the element to update.
*/

@@ -112,0 +173,0 @@ protected render(): unknown;

@@ -11,2 +11,5 @@ /**

*/
/**
* Whether the current browser supports `adoptedStyleSheets`.
*/
export declare const supportsAdoptingStyleSheets: boolean;

@@ -21,3 +24,3 @@ export declare class CSSResult {

/**
* Wrap a value for interpolation in a css tagged template literal.
* Wrap a value for interpolation in a [[`css`]] tagged template literal.
*

@@ -30,8 +33,8 @@ * This is unsafe because untrusted CSS text can be used to phone home

/**
* Template tag which which can be used with LitElement's `style` property to
* set element styles. For security reasons, only literal string values may be
* used. To incorporate non-literal values `unsafeCSS` may be used inside a
* template string part.
* Template tag which which can be used with LitElement's [[LitElement.styles |
* `styles`]] property to set element styles. For security reasons, only literal
* string values may be used. To incorporate non-literal values [[`unsafeCSS`]]
* may be used inside a template string part.
*/
export declare const css: (strings: TemplateStringsArray, ...values: (number | CSSResult)[]) => CSSResult;
//# sourceMappingURL=css-tag.d.ts.map

@@ -43,3 +43,3 @@ /**

* ```
*
* @category Decorator
* @param tagName The name of the custom element to define.

@@ -50,15 +50,16 @@ */

* A property decorator which creates a LitElement property which reflects a
* corresponding attribute value. A `PropertyDeclaration` may optionally be
* corresponding attribute value. A [[`PropertyDeclaration`]] may optionally be
* supplied to configure property features.
*
* This decorator should only be used for public fields. Private or protected
* fields should use the internalProperty decorator.
* fields should use the [[`internalProperty`]] decorator.
*
* @example
*
* class MyElement {
* @property({ type: Boolean })
* clicked = false;
* }
*
* ```ts
* class MyElement {
* @property({ type: Boolean })
* clicked = false;
* }
* ```
* @category Decorator
* @ExportDecoratedItems

@@ -82,2 +83,3 @@ */

* properties may be renamed by optimization tools like closure compiler.
* @category Decorator
*/

@@ -90,2 +92,4 @@ export declare function internalProperty(options?: InternalPropertyDeclaration): (protoOrDescriptor: Object | ClassElement, name?: string | number | symbol | undefined) => any;

* @param selector A DOMString containing one or more selectors to match.
* @param cache An optional boolean which when true performs the DOM query only
* once and caches the result.
*

@@ -96,16 +100,18 @@ * See: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

*
* class MyElement {
* @query('#first')
* first;
* ```ts
* class MyElement {
* @query('#first')
* first;
*
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
*
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
* ```
* @category Decorator
*/
export declare function query(selector: string): (protoOrDescriptor: Object | ClassElement, name?: string | number | symbol | undefined) => any;
export declare function query(selector: string, cache?: boolean): (protoOrDescriptor: Object | ClassElement, name?: string | number | symbol | undefined) => any;
/**

@@ -124,19 +130,21 @@ * A property decorator that converts a class property into a getter that

* @example
* ```ts
* class MyElement {
* @queryAsync('#first')
* first;
*
* class MyElement {
* @queryAsync('#first')
* first;
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
*
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
*
* // external usage
* async doSomethingWithFirst() {
* (await aMyElement.first).doSomething();
* }
* // external usage
* async doSomethingWithFirst() {
* (await aMyElement.first).doSomething();
* }
* ```
* @category Decorator
*/

@@ -154,14 +162,16 @@ export declare function queryAsync(selector: string): (protoOrDescriptor: Object | ClassElement, name?: string | number | symbol | undefined) => any;

* @example
* ```ts
* class MyElement {
* @queryAll('div')
* divs;
*
* class MyElement {
* @queryAll('div')
* divs;
*
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
* ```
* @category Decorator
*/

@@ -180,19 +190,21 @@ export declare function queryAll(selector: string): (protoOrDescriptor: Object | ClassElement, name?: string | number | symbol | undefined) => any;

* @example
* ```ts
* class MyElement {
* clicked = false;
*
* class MyElement {
* clicked = false;
* render() {
* return html`
* <div @click=${this._onClick}`>
* <button></button>
* </div>
* `;
* }
*
* render() {
* return html`
* <div @click=${this._onClick}`>
* <button></button>
* </div>
* `;
* }
*
* @eventOptions({capture: true})
* _onClick(e) {
* this.clicked = true;
* }
* }
* @eventOptions({capture: true})
* _onClick(e) {
* this.clicked = true;
* }
* }
* ```
* @category Decorator
*/

@@ -205,5 +217,26 @@ export declare function eventOptions(options: AddEventListenerOptions): any;

*
* @param slotName A string name of the slot.
* @param flatten A boolean which when true flattens the assigned nodes,
* meaning any assigned nodes that are slot elements are replaced with their
* assigned nodes.
* @param selector A string which filters the results to elements that match
* the given css selector.
*
* * @example
* ```ts
* class MyElement {
* @queryAssignedNodes('list', true, '.item')
* listItems;
*
* render() {
* return html`
* <slot name="list"></slot>
* `;
* }
* }
* ```
* @category Decorator
*/
export declare function queryAssignedNodes(slotName?: string, flatten?: boolean): (protoOrDescriptor: Object | ClassElement, name?: string | number | symbol | undefined) => any;
export declare function queryAssignedNodes(slotName?: string, flatten?: boolean, selector?: string): (protoOrDescriptor: Object | ClassElement, name?: string | number | symbol | undefined) => any;
export {};
//# sourceMappingURL=decorators.d.ts.map

@@ -127,2 +127,3 @@ /**

* should be supplied by subclassers to render updates as desired.
* @noInheritDoc
*/

@@ -150,2 +151,6 @@ export declare abstract class UpdatingElement extends HTMLElement {

static properties: PropertyDeclarations;
/*
* Returns a list of attributes corresponding to the registered properties.
* @nocollapse
*/
static readonly observedAttributes: string[];

@@ -206,3 +211,3 @@ /**

*/
protected static getPropertyDescriptor(name: PropertyKey, key: string | symbol, _options: PropertyDeclaration): {
protected static getPropertyDescriptor(name: PropertyKey, key: string | symbol, options: PropertyDeclaration): {
get(): any;

@@ -261,3 +266,3 @@ set(this: UpdatingElement, value: unknown): void;

private _updateState;
private _instanceProperties;
private _instanceProperties?;
private _updatePromise;

@@ -273,3 +278,3 @@ private _enableUpdatingResolver;

*/
private _reflectingProperties;
private _reflectingProperties?;
constructor();

@@ -313,7 +318,7 @@ /**

/**
* This private version of `requestUpdate` does not access or return the
* This protected version of `requestUpdate` does not access or return the
* `updateComplete` promise. This promise can be overridden and is therefore
* not free to access.
*/
private _requestUpdate;
protected requestUpdateInternal(name?: PropertyKey, oldValue?: unknown, options?: PropertyDeclaration): void;
/**

@@ -357,2 +362,17 @@ * Requests an update which is processed asynchronously. This should

private _markUpdated;
/*
* Returns a Promise that resolves when the element has completed updating.
* The Promise value is a boolean that is `true` if the element completed the
* update without triggering another update. The Promise result is `false` if
* a property was set inside `updated()`. If the Promise is rejected, an
* exception was thrown during the update.
*
* To await additional asynchronous work, override the `_getUpdateComplete`
* method. For example, it is sometimes useful to await a rendered element
* before fulfilling this Promise. To do this, first await
* `super._getUpdateComplete()`, then any subsequent state.
*
* @returns {Promise} The Promise returns a boolean that indicates if the
* update resolved without triggering another update.
*/
readonly updateComplete: Promise<unknown>;

@@ -359,0 +379,0 @@ /**

@@ -14,2 +14,44 @@ /**

*/
/**
* The main LitElement module, which defines the [[`LitElement`]] base class and
* related APIs.
*
* LitElement components can define a template and a set of observed
* properties. Changing an observed property triggers a re-render of the
* element.
*
* Import [[`LitElement`]] and [[`html`]] from this module to create a
* component:
*
* ```js
* import {LitElement, html} from 'lit-element';
*
* class MyElement extends LitElement {
*
* // Declare observed properties
* static get properties() {
* return {
* adjective: {}
* }
* }
*
* constructor() {
* this.adjective = 'awesome';
* }
*
* // Define the element's template
* render() {
* return html`<p>your ${adjective} template here</p>`;
* }
* }
*
* customElements.define('my-element', MyElement);
* ```
*
* `LitElement` extends [[`UpdatingElement`]] and adds lit-html templating.
* The `UpdatingElement` class is provided for users that want to build
* their own custom element base classes that don't use lit-html.
*
* @packageDocumentation
*/
import { ShadyRenderOptions } from 'lit-html/lib/shady-render.js';

@@ -27,4 +69,13 @@ import { PropertyValues, UpdatingElement } from './lib/updating-element.js';

}
export interface CSSResultArray extends Array<CSSResult | CSSResultArray> {
export declare type CSSResultOrNative = CSSResult | CSSStyleSheet;
export interface CSSResultArray extends Array<CSSResultOrNative | CSSResultArray> {
}
/**
* Base element class that manages element properties and attributes, and
* renders a lit-html template.
*
* To define a component, subclass `LitElement` and implement a
* `render` method to provide the component's template. Define properties
* using the [[`properties`]] property or the [[`property`]] decorator.
*/
export declare class LitElement extends UpdatingElement {

@@ -40,6 +91,16 @@ /**

/**
* Render method used to render the value to the element's DOM.
* @param result The value to render.
* @param container Node into which to render.
* @param options Element name.
* Reference to the underlying library method used to render the element's
* DOM. By default, points to the `render` method from lit-html's shady-render
* module.
*
* **Most users will never need to touch this property.**
*
* This property should not be confused with the `render` instance method,
* which should be overridden to define a template for the element.
*
* Advanced users creating a new base class based on LitElement can override
* this property to point to a custom render method with a signature that
* matches [shady-render's `render`
* method](https://lit-html.polymer-project.org/api/modules/shady_render.html#render).
*
* @nocollapse

@@ -50,5 +111,5 @@ */

* Array of styles to apply to the element. The styles should be defined
* using the `css` tag function.
* using the [[`css`]] tag function or via constructible stylesheets.
*/
static styles?: CSSResult | CSSResultArray;
static styles?: CSSResultOrNative | CSSResultArray;
private static _styles;

@@ -61,3 +122,3 @@ /**

*/
static getStyles(): CSSResult | CSSResultArray | undefined;
static getStyles(): CSSResultOrNative | CSSResultArray | undefined;
/** @nocollapse */

@@ -72,5 +133,5 @@ private static _getUniqueStyles;

/**
* Performs element initialization. By default this calls `createRenderRoot`
* to create the element `renderRoot` node and captures any pre-set values for
* registered properties.
* Performs element initialization. By default this calls
* [[`createRenderRoot`]] to create the element [[`renderRoot`]] node and
* captures any pre-set values for registered properties.
*/

@@ -87,3 +148,3 @@ protected initialize(): void;

/**
* Applies styling to the element shadowRoot using the `static get styles`
* Applies styling to the element shadowRoot using the [[`styles`]]
* property. Styling will apply using `shadowRoot.adoptedStyleSheets` where

@@ -107,5 +168,5 @@ * available and will fallback otherwise. When Shadow DOM is polyfilled,

* Invoked on each update to perform rendering tasks. This method may return
* any value renderable by lit-html's NodePart - typically a TemplateResult.
* Setting properties inside this method will *not* trigger the element to
* update.
* any value renderable by lit-html's `NodePart` - typically a
* `TemplateResult`. Setting properties inside this method will *not* trigger
* the element to update.
*/

@@ -112,0 +173,0 @@ protected render(): unknown;

@@ -11,2 +11,5 @@ /**

*/
/**
* Whether the current browser supports `adoptedStyleSheets`.
*/
export declare const supportsAdoptingStyleSheets: boolean;

@@ -21,3 +24,3 @@ export declare class CSSResult {

/**
* Wrap a value for interpolation in a css tagged template literal.
* Wrap a value for interpolation in a [[`css`]] tagged template literal.
*

@@ -30,8 +33,8 @@ * This is unsafe because untrusted CSS text can be used to phone home

/**
* Template tag which which can be used with LitElement's `style` property to
* set element styles. For security reasons, only literal string values may be
* used. To incorporate non-literal values `unsafeCSS` may be used inside a
* template string part.
* Template tag which which can be used with LitElement's [[LitElement.styles |
* `styles`]] property to set element styles. For security reasons, only literal
* string values may be used. To incorporate non-literal values [[`unsafeCSS`]]
* may be used inside a template string part.
*/
export declare const css: (strings: TemplateStringsArray, ...values: (number | CSSResult)[]) => CSSResult;
//# sourceMappingURL=css-tag.d.ts.map

@@ -43,3 +43,3 @@ /**

* ```
*
* @category Decorator
* @param tagName The name of the custom element to define.

@@ -50,15 +50,16 @@ */

* A property decorator which creates a LitElement property which reflects a
* corresponding attribute value. A `PropertyDeclaration` may optionally be
* corresponding attribute value. A [[`PropertyDeclaration`]] may optionally be
* supplied to configure property features.
*
* This decorator should only be used for public fields. Private or protected
* fields should use the internalProperty decorator.
* fields should use the [[`internalProperty`]] decorator.
*
* @example
*
* class MyElement {
* @property({ type: Boolean })
* clicked = false;
* }
*
* ```ts
* class MyElement {
* @property({ type: Boolean })
* clicked = false;
* }
* ```
* @category Decorator
* @ExportDecoratedItems

@@ -82,2 +83,3 @@ */

* properties may be renamed by optimization tools like closure compiler.
* @category Decorator
*/

@@ -90,2 +92,4 @@ export declare function internalProperty(options?: InternalPropertyDeclaration): (protoOrDescriptor: Object | ClassElement, name?: string | number | symbol | undefined) => any;

* @param selector A DOMString containing one or more selectors to match.
* @param cache An optional boolean which when true performs the DOM query only
* once and caches the result.
*

@@ -96,16 +100,18 @@ * See: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

*
* class MyElement {
* @query('#first')
* first;
* ```ts
* class MyElement {
* @query('#first')
* first;
*
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
*
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
* ```
* @category Decorator
*/
export declare function query(selector: string): (protoOrDescriptor: Object | ClassElement, name?: string | number | symbol | undefined) => any;
export declare function query(selector: string, cache?: boolean): (protoOrDescriptor: Object | ClassElement, name?: string | number | symbol | undefined) => any;
/**

@@ -124,19 +130,21 @@ * A property decorator that converts a class property into a getter that

* @example
* ```ts
* class MyElement {
* @queryAsync('#first')
* first;
*
* class MyElement {
* @queryAsync('#first')
* first;
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
*
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
*
* // external usage
* async doSomethingWithFirst() {
* (await aMyElement.first).doSomething();
* }
* // external usage
* async doSomethingWithFirst() {
* (await aMyElement.first).doSomething();
* }
* ```
* @category Decorator
*/

@@ -154,14 +162,16 @@ export declare function queryAsync(selector: string): (protoOrDescriptor: Object | ClassElement, name?: string | number | symbol | undefined) => any;

* @example
* ```ts
* class MyElement {
* @queryAll('div')
* divs;
*
* class MyElement {
* @queryAll('div')
* divs;
*
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
* ```
* @category Decorator
*/

@@ -180,19 +190,21 @@ export declare function queryAll(selector: string): (protoOrDescriptor: Object | ClassElement, name?: string | number | symbol | undefined) => any;

* @example
* ```ts
* class MyElement {
* clicked = false;
*
* class MyElement {
* clicked = false;
* render() {
* return html`
* <div @click=${this._onClick}`>
* <button></button>
* </div>
* `;
* }
*
* render() {
* return html`
* <div @click=${this._onClick}`>
* <button></button>
* </div>
* `;
* }
*
* @eventOptions({capture: true})
* _onClick(e) {
* this.clicked = true;
* }
* }
* @eventOptions({capture: true})
* _onClick(e) {
* this.clicked = true;
* }
* }
* ```
* @category Decorator
*/

@@ -205,5 +217,26 @@ export declare function eventOptions(options: AddEventListenerOptions): any;

*
* @param slotName A string name of the slot.
* @param flatten A boolean which when true flattens the assigned nodes,
* meaning any assigned nodes that are slot elements are replaced with their
* assigned nodes.
* @param selector A string which filters the results to elements that match
* the given css selector.
*
* * @example
* ```ts
* class MyElement {
* @queryAssignedNodes('list', true, '.item')
* listItems;
*
* render() {
* return html`
* <slot name="list"></slot>
* `;
* }
* }
* ```
* @category Decorator
*/
export declare function queryAssignedNodes(slotName?: string, flatten?: boolean): (protoOrDescriptor: Object | ClassElement, name?: string | number | symbol | undefined) => any;
export declare function queryAssignedNodes(slotName?: string, flatten?: boolean, selector?: string): (protoOrDescriptor: Object | ClassElement, name?: string | number | symbol | undefined) => any;
export {};
//# sourceMappingURL=decorators.d.ts.map

@@ -127,2 +127,3 @@ /**

* should be supplied by subclassers to render updates as desired.
* @noInheritDoc
*/

@@ -150,2 +151,6 @@ export declare abstract class UpdatingElement extends HTMLElement {

static properties: PropertyDeclarations;
/*
* Returns a list of attributes corresponding to the registered properties.
* @nocollapse
*/
static readonly observedAttributes: string[];

@@ -206,3 +211,3 @@ /**

*/
protected static getPropertyDescriptor(name: PropertyKey, key: string | symbol, _options: PropertyDeclaration): {
protected static getPropertyDescriptor(name: PropertyKey, key: string | symbol, options: PropertyDeclaration): {
get(): any;

@@ -261,3 +266,3 @@ set(this: UpdatingElement, value: unknown): void;

private _updateState;
private _instanceProperties;
private _instanceProperties?;
private _updatePromise;

@@ -273,3 +278,3 @@ private _enableUpdatingResolver;

*/
private _reflectingProperties;
private _reflectingProperties?;
constructor();

@@ -313,7 +318,7 @@ /**

/**
* This private version of `requestUpdate` does not access or return the
* This protected version of `requestUpdate` does not access or return the
* `updateComplete` promise. This promise can be overridden and is therefore
* not free to access.
*/
private _requestUpdate;
protected requestUpdateInternal(name?: PropertyKey, oldValue?: unknown, options?: PropertyDeclaration): void;
/**

@@ -357,2 +362,17 @@ * Requests an update which is processed asynchronously. This should

private _markUpdated;
/*
* Returns a Promise that resolves when the element has completed updating.
* The Promise value is a boolean that is `true` if the element completed the
* update without triggering another update. The Promise result is `false` if
* a property was set inside `updated()`. If the Promise is rejected, an
* exception was thrown during the update.
*
* To await additional asynchronous work, override the `_getUpdateComplete`
* method. For example, it is sometimes useful to await a rendered element
* before fulfilling this Promise. To do this, first await
* `super._getUpdateComplete()`, then any subsequent state.
*
* @returns {Promise} The Promise returns a boolean that indicates if the
* update resolved without triggering another update.
*/
readonly updateComplete: Promise<unknown>;

@@ -359,0 +379,0 @@ /**

@@ -14,2 +14,44 @@ /**

*/
/**
* The main LitElement module, which defines the [[`LitElement`]] base class and
* related APIs.
*
* LitElement components can define a template and a set of observed
* properties. Changing an observed property triggers a re-render of the
* element.
*
* Import [[`LitElement`]] and [[`html`]] from this module to create a
* component:
*
* ```js
* import {LitElement, html} from 'lit-element';
*
* class MyElement extends LitElement {
*
* // Declare observed properties
* static get properties() {
* return {
* adjective: {}
* }
* }
*
* constructor() {
* this.adjective = 'awesome';
* }
*
* // Define the element's template
* render() {
* return html`<p>your ${adjective} template here</p>`;
* }
* }
*
* customElements.define('my-element', MyElement);
* ```
*
* `LitElement` extends [[`UpdatingElement`]] and adds lit-html templating.
* The `UpdatingElement` class is provided for users that want to build
* their own custom element base classes that don't use lit-html.
*
* @packageDocumentation
*/
import { ShadyRenderOptions } from 'lit-html/lib/shady-render.js';

@@ -27,4 +69,13 @@ import { PropertyValues, UpdatingElement } from './lib/updating-element.js';

}
export interface CSSResultArray extends Array<CSSResult | CSSResultArray> {
export declare type CSSResultOrNative = CSSResult | CSSStyleSheet;
export interface CSSResultArray extends Array<CSSResultOrNative | CSSResultArray> {
}
/**
* Base element class that manages element properties and attributes, and
* renders a lit-html template.
*
* To define a component, subclass `LitElement` and implement a
* `render` method to provide the component's template. Define properties
* using the [[`properties`]] property or the [[`property`]] decorator.
*/
export declare class LitElement extends UpdatingElement {

@@ -40,6 +91,16 @@ /**

/**
* Render method used to render the value to the element's DOM.
* @param result The value to render.
* @param container Node into which to render.
* @param options Element name.
* Reference to the underlying library method used to render the element's
* DOM. By default, points to the `render` method from lit-html's shady-render
* module.
*
* **Most users will never need to touch this property.**
*
* This property should not be confused with the `render` instance method,
* which should be overridden to define a template for the element.
*
* Advanced users creating a new base class based on LitElement can override
* this property to point to a custom render method with a signature that
* matches [shady-render's `render`
* method](https://lit-html.polymer-project.org/api/modules/shady_render.html#render).
*
* @nocollapse

@@ -50,5 +111,5 @@ */

* Array of styles to apply to the element. The styles should be defined
* using the `css` tag function.
* using the [[`css`]] tag function or via constructible stylesheets.
*/
static styles?: CSSResult | CSSResultArray;
static styles?: CSSResultOrNative | CSSResultArray;
private static _styles;

@@ -61,3 +122,3 @@ /**

*/
static getStyles(): CSSResult | CSSResultArray | undefined;
static getStyles(): CSSResultOrNative | CSSResultArray | undefined;
/** @nocollapse */

@@ -72,5 +133,5 @@ private static _getUniqueStyles;

/**
* Performs element initialization. By default this calls `createRenderRoot`
* to create the element `renderRoot` node and captures any pre-set values for
* registered properties.
* Performs element initialization. By default this calls
* [[`createRenderRoot`]] to create the element [[`renderRoot`]] node and
* captures any pre-set values for registered properties.
*/

@@ -87,3 +148,3 @@ protected initialize(): void;

/**
* Applies styling to the element shadowRoot using the `static get styles`
* Applies styling to the element shadowRoot using the [[`styles`]]
* property. Styling will apply using `shadowRoot.adoptedStyleSheets` where

@@ -107,5 +168,5 @@ * available and will fallback otherwise. When Shadow DOM is polyfilled,

* Invoked on each update to perform rendering tasks. This method may return
* any value renderable by lit-html's NodePart - typically a TemplateResult.
* Setting properties inside this method will *not* trigger the element to
* update.
* any value renderable by lit-html's `NodePart` - typically a
* `TemplateResult`. Setting properties inside this method will *not* trigger
* the element to update.
*/

@@ -112,0 +173,0 @@ protected render(): unknown;

@@ -11,2 +11,5 @@ /**

*/
/**
* Whether the current browser supports `adoptedStyleSheets`.
*/
export declare const supportsAdoptingStyleSheets: boolean;

@@ -21,3 +24,3 @@ export declare class CSSResult {

/**
* Wrap a value for interpolation in a css tagged template literal.
* Wrap a value for interpolation in a [[`css`]] tagged template literal.
*

@@ -30,8 +33,8 @@ * This is unsafe because untrusted CSS text can be used to phone home

/**
* Template tag which which can be used with LitElement's `style` property to
* set element styles. For security reasons, only literal string values may be
* used. To incorporate non-literal values `unsafeCSS` may be used inside a
* template string part.
* Template tag which which can be used with LitElement's [[LitElement.styles |
* `styles`]] property to set element styles. For security reasons, only literal
* string values may be used. To incorporate non-literal values [[`unsafeCSS`]]
* may be used inside a template string part.
*/
export declare const css: (strings: TemplateStringsArray, ...values: (number | CSSResult)[]) => CSSResult;
//# sourceMappingURL=css-tag.d.ts.map

@@ -43,3 +43,3 @@ /**

* ```
*
* @category Decorator
* @param tagName The name of the custom element to define.

@@ -50,15 +50,16 @@ */

* A property decorator which creates a LitElement property which reflects a
* corresponding attribute value. A `PropertyDeclaration` may optionally be
* corresponding attribute value. A [[`PropertyDeclaration`]] may optionally be
* supplied to configure property features.
*
* This decorator should only be used for public fields. Private or protected
* fields should use the internalProperty decorator.
* fields should use the [[`internalProperty`]] decorator.
*
* @example
*
* class MyElement {
* @property({ type: Boolean })
* clicked = false;
* }
*
* ```ts
* class MyElement {
* @property({ type: Boolean })
* clicked = false;
* }
* ```
* @category Decorator
* @ExportDecoratedItems

@@ -82,2 +83,3 @@ */

* properties may be renamed by optimization tools like closure compiler.
* @category Decorator
*/

@@ -90,2 +92,4 @@ export declare function internalProperty(options?: InternalPropertyDeclaration): (protoOrDescriptor: Object | ClassElement, name?: string | number | symbol | undefined) => any;

* @param selector A DOMString containing one or more selectors to match.
* @param cache An optional boolean which when true performs the DOM query only
* once and caches the result.
*

@@ -96,16 +100,18 @@ * See: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

*
* class MyElement {
* @query('#first')
* first;
* ```ts
* class MyElement {
* @query('#first')
* first;
*
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
*
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
* ```
* @category Decorator
*/
export declare function query(selector: string): (protoOrDescriptor: Object | ClassElement, name?: string | number | symbol | undefined) => any;
export declare function query(selector: string, cache?: boolean): (protoOrDescriptor: Object | ClassElement, name?: string | number | symbol | undefined) => any;
/**

@@ -124,19 +130,21 @@ * A property decorator that converts a class property into a getter that

* @example
* ```ts
* class MyElement {
* @queryAsync('#first')
* first;
*
* class MyElement {
* @queryAsync('#first')
* first;
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
*
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
*
* // external usage
* async doSomethingWithFirst() {
* (await aMyElement.first).doSomething();
* }
* // external usage
* async doSomethingWithFirst() {
* (await aMyElement.first).doSomething();
* }
* ```
* @category Decorator
*/

@@ -154,14 +162,16 @@ export declare function queryAsync(selector: string): (protoOrDescriptor: Object | ClassElement, name?: string | number | symbol | undefined) => any;

* @example
* ```ts
* class MyElement {
* @queryAll('div')
* divs;
*
* class MyElement {
* @queryAll('div')
* divs;
*
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
* ```
* @category Decorator
*/

@@ -180,19 +190,21 @@ export declare function queryAll(selector: string): (protoOrDescriptor: Object | ClassElement, name?: string | number | symbol | undefined) => any;

* @example
* ```ts
* class MyElement {
* clicked = false;
*
* class MyElement {
* clicked = false;
* render() {
* return html`
* <div @click=${this._onClick}`>
* <button></button>
* </div>
* `;
* }
*
* render() {
* return html`
* <div @click=${this._onClick}`>
* <button></button>
* </div>
* `;
* }
*
* @eventOptions({capture: true})
* _onClick(e) {
* this.clicked = true;
* }
* }
* @eventOptions({capture: true})
* _onClick(e) {
* this.clicked = true;
* }
* }
* ```
* @category Decorator
*/

@@ -205,5 +217,26 @@ export declare function eventOptions(options: AddEventListenerOptions): any;

*
* @param slotName A string name of the slot.
* @param flatten A boolean which when true flattens the assigned nodes,
* meaning any assigned nodes that are slot elements are replaced with their
* assigned nodes.
* @param selector A string which filters the results to elements that match
* the given css selector.
*
* * @example
* ```ts
* class MyElement {
* @queryAssignedNodes('list', true, '.item')
* listItems;
*
* render() {
* return html`
* <slot name="list"></slot>
* `;
* }
* }
* ```
* @category Decorator
*/
export declare function queryAssignedNodes(slotName?: string, flatten?: boolean): (protoOrDescriptor: Object | ClassElement, name?: string | number | symbol | undefined) => any;
export declare function queryAssignedNodes(slotName?: string, flatten?: boolean, selector?: string): (protoOrDescriptor: Object | ClassElement, name?: string | number | symbol | undefined) => any;
export {};
//# sourceMappingURL=decorators.d.ts.map

@@ -127,2 +127,3 @@ /**

* should be supplied by subclassers to render updates as desired.
* @noInheritDoc
*/

@@ -150,2 +151,6 @@ export declare abstract class UpdatingElement extends HTMLElement {

static properties: PropertyDeclarations;
/*
* Returns a list of attributes corresponding to the registered properties.
* @nocollapse
*/
static readonly observedAttributes: string[];

@@ -206,3 +211,3 @@ /**

*/
protected static getPropertyDescriptor(name: PropertyKey, key: string | symbol, _options: PropertyDeclaration): {
protected static getPropertyDescriptor(name: PropertyKey, key: string | symbol, options: PropertyDeclaration): {
get(): any;

@@ -261,3 +266,3 @@ set(this: UpdatingElement, value: unknown): void;

private _updateState;
private _instanceProperties;
private _instanceProperties?;
private _updatePromise;

@@ -273,3 +278,3 @@ private _enableUpdatingResolver;

*/
private _reflectingProperties;
private _reflectingProperties?;
constructor();

@@ -313,7 +318,7 @@ /**

/**
* This private version of `requestUpdate` does not access or return the
* This protected version of `requestUpdate` does not access or return the
* `updateComplete` promise. This promise can be overridden and is therefore
* not free to access.
*/
private _requestUpdate;
protected requestUpdateInternal(name?: PropertyKey, oldValue?: unknown, options?: PropertyDeclaration): void;
/**

@@ -357,2 +362,17 @@ * Requests an update which is processed asynchronously. This should

private _markUpdated;
/*
* Returns a Promise that resolves when the element has completed updating.
* The Promise value is a boolean that is `true` if the element completed the
* update without triggering another update. The Promise result is `false` if
* a property was set inside `updated()`. If the Promise is rejected, an
* exception was thrown during the update.
*
* To await additional asynchronous work, override the `_getUpdateComplete`
* method. For example, it is sometimes useful to await a rendered element
* before fulfilling this Promise. To do this, first await
* `super._getUpdateComplete()`, then any subsequent state.
*
* @returns {Promise} The Promise returns a boolean that indicates if the
* update resolved without triggering another update.
*/
readonly updateComplete: Promise<unknown>;

@@ -359,0 +379,0 @@ /**

@@ -14,2 +14,44 @@ /**

*/
/**
* The main LitElement module, which defines the [[`LitElement`]] base class and
* related APIs.
*
* LitElement components can define a template and a set of observed
* properties. Changing an observed property triggers a re-render of the
* element.
*
* Import [[`LitElement`]] and [[`html`]] from this module to create a
* component:
*
* ```js
* import {LitElement, html} from 'lit-element';
*
* class MyElement extends LitElement {
*
* // Declare observed properties
* static get properties() {
* return {
* adjective: {}
* }
* }
*
* constructor() {
* this.adjective = 'awesome';
* }
*
* // Define the element's template
* render() {
* return html`<p>your ${adjective} template here</p>`;
* }
* }
*
* customElements.define('my-element', MyElement);
* ```
*
* `LitElement` extends [[`UpdatingElement`]] and adds lit-html templating.
* The `UpdatingElement` class is provided for users that want to build
* their own custom element base classes that don't use lit-html.
*
* @packageDocumentation
*/
import { ShadyRenderOptions } from 'lit-html/lib/shady-render.js';

@@ -27,4 +69,13 @@ import { PropertyValues, UpdatingElement } from './lib/updating-element.js';

}
export interface CSSResultArray extends Array<CSSResult | CSSResultArray> {
export declare type CSSResultOrNative = CSSResult | CSSStyleSheet;
export interface CSSResultArray extends Array<CSSResultOrNative | CSSResultArray> {
}
/**
* Base element class that manages element properties and attributes, and
* renders a lit-html template.
*
* To define a component, subclass `LitElement` and implement a
* `render` method to provide the component's template. Define properties
* using the [[`properties`]] property or the [[`property`]] decorator.
*/
export declare class LitElement extends UpdatingElement {

@@ -40,6 +91,16 @@ /**

/**
* Render method used to render the value to the element's DOM.
* @param result The value to render.
* @param container Node into which to render.
* @param options Element name.
* Reference to the underlying library method used to render the element's
* DOM. By default, points to the `render` method from lit-html's shady-render
* module.
*
* **Most users will never need to touch this property.**
*
* This property should not be confused with the `render` instance method,
* which should be overridden to define a template for the element.
*
* Advanced users creating a new base class based on LitElement can override
* this property to point to a custom render method with a signature that
* matches [shady-render's `render`
* method](https://lit-html.polymer-project.org/api/modules/shady_render.html#render).
*
* @nocollapse

@@ -50,5 +111,5 @@ */

* Array of styles to apply to the element. The styles should be defined
* using the `css` tag function.
* using the [[`css`]] tag function or via constructible stylesheets.
*/
static styles?: CSSResult | CSSResultArray;
static styles?: CSSResultOrNative | CSSResultArray;
private static _styles;

@@ -61,3 +122,3 @@ /**

*/
static getStyles(): CSSResult | CSSResultArray | undefined;
static getStyles(): CSSResultOrNative | CSSResultArray | undefined;
/** @nocollapse */

@@ -72,5 +133,5 @@ private static _getUniqueStyles;

/**
* Performs element initialization. By default this calls `createRenderRoot`
* to create the element `renderRoot` node and captures any pre-set values for
* registered properties.
* Performs element initialization. By default this calls
* [[`createRenderRoot`]] to create the element [[`renderRoot`]] node and
* captures any pre-set values for registered properties.
*/

@@ -87,3 +148,3 @@ protected initialize(): void;

/**
* Applies styling to the element shadowRoot using the `static get styles`
* Applies styling to the element shadowRoot using the [[`styles`]]
* property. Styling will apply using `shadowRoot.adoptedStyleSheets` where

@@ -107,5 +168,5 @@ * available and will fallback otherwise. When Shadow DOM is polyfilled,

* Invoked on each update to perform rendering tasks. This method may return
* any value renderable by lit-html's NodePart - typically a TemplateResult.
* Setting properties inside this method will *not* trigger the element to
* update.
* any value renderable by lit-html's `NodePart` - typically a
* `TemplateResult`. Setting properties inside this method will *not* trigger
* the element to update.
*/

@@ -112,0 +173,0 @@ protected render(): unknown;

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc