172 lines
6.6 KiB
TypeScript
172 lines
6.6 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
|
|
* This code may only be used under the BSD style license found at
|
|
* http://polymer.github.io/LICENSE.txt
|
|
* The complete set of authors may be found at
|
|
* http://polymer.github.io/AUTHORS.txt
|
|
* The complete set of contributors may be found at
|
|
* http://polymer.github.io/CONTRIBUTORS.txt
|
|
* Code distributed by Google as part of the polymer project is also
|
|
* subject to an additional IP rights grant found at
|
|
* http://polymer.github.io/PATENTS.txt
|
|
*/
|
|
/**
|
|
* 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';
|
|
import { PropertyValues, UpdatingElement } from './lib/updating-element.js';
|
|
export * from './lib/updating-element.js';
|
|
export { UpdatingElement as ReactiveElement } from './lib/updating-element.js';
|
|
export * from './lib/decorators.js';
|
|
export { html, svg, TemplateResult, SVGTemplateResult } from 'lit-html/lit-html.js';
|
|
import { CSSResult } from './lib/css-tag.js';
|
|
export * from './lib/css-tag.js';
|
|
declare global {
|
|
interface Window {
|
|
litElementVersions: string[];
|
|
}
|
|
}
|
|
export declare type CSSResultOrNative = CSSResult | CSSStyleSheet;
|
|
export interface CSSResultArray extends Array<CSSResultOrNative | CSSResultArray> {
|
|
}
|
|
export declare type CSSResultGroup = 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 {
|
|
/**
|
|
* Ensure this class is marked as `finalized` as an optimization ensuring
|
|
* it will not needlessly try to `finalize`.
|
|
*
|
|
* Note this property name is a string to prevent breaking Closure JS Compiler
|
|
* optimizations. See updating-element.ts for more information.
|
|
*/
|
|
protected static ['finalized']: boolean;
|
|
/**
|
|
* 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
|
|
*/
|
|
static render: (result: unknown, container: Element | DocumentFragment, options: ShadyRenderOptions) => void;
|
|
/**
|
|
* Array of styles to apply to the element. The styles should be defined
|
|
* using the [[`css`]] tag function or via constructible stylesheets.
|
|
*/
|
|
static styles?: CSSResultGroup;
|
|
/** @nocollapse */
|
|
static shadowRootOptions: ShadowRootInit;
|
|
private static _styles;
|
|
/**
|
|
* Return the array of styles to apply to the element.
|
|
* Override this method to integrate into a style management system.
|
|
*
|
|
* @nocollapse
|
|
*/
|
|
static getStyles(): CSSResultGroup | undefined;
|
|
/** @nocollapse */
|
|
private static _getUniqueStyles;
|
|
private _needsShimAdoptedStyleSheets?;
|
|
/**
|
|
* Node or ShadowRoot into which element DOM should be rendered. Defaults
|
|
* to an open shadowRoot.
|
|
*/
|
|
readonly renderRoot: Element | DocumentFragment;
|
|
/**
|
|
* Performs element initialization. By default this calls
|
|
* [[`createRenderRoot`]] to create the element [[`renderRoot`]] node and
|
|
* captures any pre-set values for registered properties.
|
|
*/
|
|
protected initialize(): void;
|
|
/**
|
|
* Returns the node into which the element should render and by default
|
|
* creates and returns an open shadowRoot. Implement to customize where the
|
|
* element's DOM is rendered. For example, to render into the element's
|
|
* childNodes, return `this`.
|
|
* @returns {Element|DocumentFragment} Returns a node into which to render.
|
|
*/
|
|
protected createRenderRoot(): Element | ShadowRoot;
|
|
/**
|
|
* Applies styling to the element shadowRoot using the [[`styles`]]
|
|
* property. Styling will apply using `shadowRoot.adoptedStyleSheets` where
|
|
* available and will fallback otherwise. When Shadow DOM is polyfilled,
|
|
* ShadyCSS scopes styles and adds them to the document. When Shadow DOM
|
|
* is available but `adoptedStyleSheets` is not, styles are appended to the
|
|
* end of the `shadowRoot` to [mimic spec
|
|
* behavior](https://wicg.github.io/construct-stylesheets/#using-constructed-stylesheets).
|
|
*/
|
|
protected adoptStyles(): void;
|
|
connectedCallback(): void;
|
|
/**
|
|
* Updates the element. This method reflects property values to attributes
|
|
* and calls `render` to render DOM via lit-html. Setting properties inside
|
|
* this method will *not* trigger another update.
|
|
* @param _changedProperties Map of changed properties with old values
|
|
*/
|
|
protected update(changedProperties: PropertyValues): void;
|
|
/**
|
|
* 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.
|
|
*/
|
|
protected render(): unknown;
|
|
}
|
|
//# sourceMappingURL=lit-element.d.ts.map
|