Map of changed properties with old values. Takes an optional generic interface corresponding to the declared element properties.
Interprets a template literal as an HTML template that can efficiently render to and update a container.
Whether the current browser supports adoptedStyleSheets.
Interprets a template literal as an SVG template that can efficiently render to and update a container.
Class decorator factory that defines the decorated class as a custom element.
@customElement('my-element')
class MyElement {
render() {
return html``;
}
}The name of the custom element to define.
Adds event listener options to a method used as an event listener in a lit-html template.
An object that specifies event listener options as accepted by
EventTarget#addEventListener and EventTarget#removeEventListener.
Current browsers support the capture, passive, and once options. See:
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters
Declares a private or protected property that still triggers updates to the element when it changes.
Properties declared this way must not be used from HTML or HTML templating systems, they're solely for properties internal to the element. These properties may be renamed by optimization tools like closure compiler.
A property decorator which creates a LitElement property which reflects a
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.
A property decorator that converts a class property into a getter that executes a querySelector on the element's renderRoot.
A DOMString containing one or more selectors to match.
An optional boolean which when true performs the DOM query only once and caches the result.
See: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
A property decorator that converts a class property into a getter that executes a querySelectorAll on the element's renderRoot.
A DOMString containing one or more selectors to match.
See: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
A property decorator that converts a class property into a getter that
returns the assignedNodes of the given named slot. Note, the type of
this property should be annotated as NodeListOf<HTMLElement>.
A string name of the slot.
A boolean which when true flattens the assigned nodes, meaning any assigned nodes that are slot elements are replaced with their assigned nodes.
A string which filters the results to elements that match the given css selector.
@example
class MyElement {
@queryAssignedNodes('list', true, '.item')
listItems;
render() {
return html`
<slot name="list"></slot>
`;
}
}A property decorator that converts a class property into a getter that
returns a promise that resolves to the result of a querySelector on the
element's renderRoot done after the element's updateComplete promise
resolves. When the queried property may change with element state, this
decorator can be used instead of requiring users to await the
updateComplete before accessing the property.
A DOMString containing one or more selectors to match.
See: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
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.
Change function that returns true if value is different from oldValue.
This method is used as the default for a property's hasChanged function.
Generated using TypeDoc
The main LitElement module, which defines the
LitElementbase 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
LitElementandhtmlfrom this module to create a component: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);LitElementextendsUpdatingElementand adds lit-html templating. TheUpdatingElementclass is provided for users that want to build their own custom element base classes that don't use lit-html.