@legumeinfo/web-components
    Preparing search index...

    Class LisPublicationSearchElementHtml Element

    <lis-publication-search-element>

    A Web Component that provides an interface for performing keyword searches for Publications and displaying results in a paginated table. Note that the component saves its state to the URL query string parameters and a search will be automatically performed if the parameters are present when the componnent is loaded. The component uses the LisPaginatedSearchMixin mixin. See the mixin docs for further details.

    • query: The text in the query field of the search form.
    • page: What page of results is loaded.

    HTMLElement properties can only be set via JavaScript. This means the searchFunction property must be set on a <lis-publication-search-element> tag's instance of the LisPublicationSearchElement class. For example:

    <!-- add the Web Component to your HTML -->
    <lis-publication-search-element id="publication-search"></lis-publication-search-element>

    <!-- configure the Web Component via JavaScript -->
    <script type="text/javascript">
      // a site-specific function that sends a request to a Publication search API
      function getPublications(searchData, {abortSignal}) {
        // returns a Promise that resolves to a search result object
      }
      // get the Publication search element
      const searchElement = document.getElementById('publication-search');
      // set the element's searchFunction property
      searchElement.searchFunction = getPublications;
    </script>

    The LisPublicationSearchElement class inherits the resultAttributes and tableHeader properties from LisPaginatedSearchMixin mixin. These are used to define what attributes of the results provided by the searchFunction will be shown in the results table and what their corresponding headers will be in the table. These properties can be overridden via JavaScript. For example:

    <!-- add the Web Component to your HTML -->
    <lis-publication-search-element id="publication-search"></lis-publication-search-element>

    <!-- configure the Web Component via JavaScript -->
    <script type="text/javascript">
      // get the publication search element
      const searchElement = document.getElementById('publication-search');
      // set the element's resultAttributes property
      searchElement.resultAttributes = ["title", "firstAuthor", "doi"];
      // set the element's tableHeader property
      searchElement.tableHeader = {
        title: "Title",
        firstAuthor: "First Author",
        doi: "DOI",
      };
    </script>

    The titleExample property can be used to set the example text in the search form. For example:

    <!-- set the example text via HTML -->
    <lis-publication-search-element titleExample="expression"></lis-publication-search-element>

    <!-- set the example text via JavaScript -->
    <lis-publication-search-element id="publication-search"></lis-publication-search-element>

    <script type="text/javascript">
      // get the publication search element
      const searchElement = document.getElementById('publication-search');
      // set the element's titleExample property
      searchElement.titleExample = 'expression';
    </script>

    Hierarchy

    Index

    Other

    constructor _downloadingRef accessKey accessKeyLabel ariaAtomic ariaAutoComplete ariaBrailleLabel ariaBrailleRoleDescription ariaBusy ariaChecked ariaColCount ariaColIndex ariaColIndexText ariaColSpan ariaCurrent ariaDescription ariaDisabled ariaExpanded ariaHasPopup ariaHidden ariaInvalid ariaKeyShortcuts ariaLabel ariaLevel ariaLive ariaModal ariaMultiLine ariaMultiSelectable ariaOrientation ariaPlaceholder ariaPosInSet ariaPressed ariaReadOnly ariaRelevant ariaRequired ariaRoleDescription ariaRowCount ariaRowIndex ariaRowIndexText ariaRowSpan ariaSelected ariaSetSize ariaSort ariaValueMax ariaValueMin ariaValueNow ariaValueText assignedSlot ATTRIBUTE_NODE attributes attributeStyleMap autocapitalize autofocus baseURI cancelPromiseController CDATA_SECTION_NODE childElementCount childNodes children className clientHeight clientLeft clientTop clientWidth COMMENT_NODE contentEditable currentCSSZoom dataset dir DOCUMENT_FRAGMENT_NODE DOCUMENT_NODE DOCUMENT_POSITION_CONTAINED_BY DOCUMENT_POSITION_CONTAINS DOCUMENT_POSITION_DISCONNECTED DOCUMENT_POSITION_FOLLOWING DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC DOCUMENT_POSITION_PRECEDING DOCUMENT_TYPE_NODE domContentLoadedController downloadFunction? draggable ELEMENT_NODE enterKeyHint ENTITY_NODE ENTITY_REFERENCE_NODE firstChild firstElementChild hidden id inert innerHTML innerText inputMode isConnected isContentEditable lang lastChild lastElementChild localName namespaceURI nextElementSibling nextSibling nodeName nodeType nodeValue nonce? NOTATION_NODE offsetHeight offsetLeft offsetParent offsetTop offsetWidth onabort onanimationcancel onanimationend onanimationiteration onanimationstart onauxclick onbeforeinput onbeforetoggle onblur oncancel oncanplay oncanplaythrough onchange onclick onclose oncontextlost oncontextmenu oncontextrestored oncopy oncuechange oncut ondblclick ondrag ondragend ondragenter ondragleave ondragover ondragstart ondrop ondurationchange onemptied onended onerror onfocus onformdata onfullscreenchange onfullscreenerror ongotpointercapture oninput oninvalid onkeydown onkeypress onkeyup onload onloadeddata onloadedmetadata onloadstart onlostpointercapture onmousedown onmouseenter onmouseleave onmousemove onmouseout onmouseover onmouseup onpaste onpause onplay onplaying onpointercancel onpointerdown onpointerenter onpointerleave onpointermove onpointerout onpointerover onpointerup onprogress onratechange onreset onresize onscroll onscrollend onsecuritypolicyviolation onseeked onseeking onselect onselectionchange onselectstart onslotchange onstalled onsubmit onsuspend ontimeupdate ontoggle ontouchcancel? ontouchend? ontouchmove? ontouchstart? ontransitioncancel ontransitionend ontransitionrun ontransitionstart onvolumechange onwaiting onwebkitanimationend onwebkitanimationiteration onwebkitanimationstart onwebkittransitionend onwheel outerHTML outerText ownerDocument parentElement parentNode popover prefix previousElementSibling previousSibling PROCESSING_INSTRUCTION_NODE queryStringController queryStringReflection requiredQueryStringParams resultAttributes role scrollHeight scrollLeft scrollTop scrollWidth searchFunction searchResults shadowRoot slot spellcheck tabIndex tableColumnClasses tableHeader tagName TEXT_NODE textContent title titleExample? translate writingSuggestions _$litElement$ _initializers? [metadata] finalized classList part style addEventListener after animate append appendChild attachInternals attachShadow before blur checkVisibility click cloneNode closest compareDocumentPosition computedStyleMap contains dispatchEvent focus formToObject getAnimations getAttribute getAttributeNames getAttributeNode getAttributeNodeNS getAttributeNS getBoundingClientRect getClientRects getElementsByClassName getElementsByTagName getElementsByTagNameNS getHTML getRootNode hasAttribute hasAttributeNS hasAttributes hasChildNodes hasPointerCapture hidePopover insertAdjacentElement insertAdjacentHTML insertAdjacentText insertBefore isDefaultNamespace isEqualNode isSameNode lookupNamespaceURI lookupPrefix matches normalize prepend querySelector querySelectorAll releasePointerCapture remove removeAttribute removeAttributeNode removeAttributeNS removeChild removeEventListener renderResults renderResultsInfo replaceChild replaceChildren replaceWith requestFullscreen requestPointerLock scroll scrollBy scrollIntoView scrollTo setAttribute setAttributeNode setAttributeNodeNS setAttributeNS setHTMLUnsafe setPointerCapture showPopover submit toggleAttribute togglePopover valueOrQuerystringParameter webkitMatchesSelector addInitializer finalize

    attributes

    observedAttributes attributeChangedCallback

    controllers

    addController removeController

    dev-mode

    disableWarning? enabledWarnings? enableWarning?

    lifecycle

    connectedCallback disconnectedCallback

    properties

    elementProperties properties createProperty getPropertyDescriptor getPropertyOptions

    rendering

    renderOptions renderRoot shadowRootOptions createRenderRoot render

    styles

    elementStyles finalizeStyles

    updates

    hasUpdated isUpdatePending updateComplete enableUpdating firstUpdated getUpdateComplete performUpdate requestUpdate scheduleUpdate shouldUpdate update updated willUpdate

    Other

    Protected Internal_downloadingRef

    _downloadingRef: Ref<LisInlineLoadingElement>
    accessKey: string

    MDN Reference

    accessKeyLabel: string

    MDN Reference

    ariaAtomic: null | string

    MDN Reference

    ariaAutoComplete: null | string

    MDN Reference

    ariaBrailleLabel: null | string

    MDN Reference

    ariaBrailleRoleDescription: null | string

    MDN Reference

    ariaBusy: null | string

    MDN Reference

    ariaChecked: null | string

    MDN Reference

    ariaColCount: null | string

    MDN Reference

    ariaColIndex: null | string

    MDN Reference

    ariaColIndexText: null | string

    MDN Reference

    ariaColSpan: null | string

    MDN Reference

    ariaCurrent: null | string

    MDN Reference

    ariaDescription: null | string

    MDN Reference

    ariaDisabled: null | string

    MDN Reference

    ariaExpanded: null | string

    MDN Reference

    ariaHasPopup: null | string

    MDN Reference

    ariaHidden: null | string

    MDN Reference

    ariaInvalid: null | string
    ariaKeyShortcuts: null | string

    MDN Reference

    ariaLabel: null | string

    MDN Reference

    ariaLevel: null | string

    MDN Reference

    ariaLive: null | string

    MDN Reference

    ariaModal: null | string

    MDN Reference

    ariaMultiLine: null | string

    MDN Reference

    ariaMultiSelectable: null | string

    MDN Reference

    ariaOrientation: null | string

    MDN Reference

    ariaPlaceholder: null | string

    MDN Reference

    ariaPosInSet: null | string

    MDN Reference

    ariaPressed: null | string

    MDN Reference

    ariaReadOnly: null | string

    MDN Reference

    ariaRelevant: null | string

    MDN Reference

    ariaRequired: null | string

    MDN Reference

    ariaRoleDescription: null | string

    MDN Reference

    ariaRowCount: null | string

    MDN Reference

    ariaRowIndex: null | string

    MDN Reference

    ariaRowIndexText: null | string

    MDN Reference

    ariaRowSpan: null | string

    MDN Reference

    ariaSelected: null | string

    MDN Reference

    ariaSetSize: null | string

    MDN Reference

    ariaSort: null | string

    MDN Reference

    ariaValueMax: null | string

    MDN Reference

    ariaValueMin: null | string

    MDN Reference

    ariaValueNow: null | string

    MDN Reference

    ariaValueText: null | string

    MDN Reference

    assignedSlot: null | HTMLSlotElement

    MDN Reference

    ATTRIBUTE_NODE: 2
    attributes: NamedNodeMap

    MDN Reference

    attributeStyleMap: StylePropertyMap

    MDN Reference

    autocapitalize: string

    MDN Reference

    autofocus: boolean

    MDN Reference

    baseURI: string

    Returns node's node document's document base URL.

    MDN Reference

    cancelPromiseController: LisCancelPromiseController

    Current Web standards do not allow Promises to be cancelled. Components that use the LisPaginatedSearchMixin mixin can use this controller to make Promises cancelable. Event listeners can also subscribe to the controller and will be called whenever it cancels. The underlying AbortSignal is also available for more low-level access. This is the value of the abortSignal attribute of the PaginatedSearchOptions object passed to the component's SearchFunction and DownloadFunction..

    CDATA_SECTION_NODE: 4

    node is a CDATASection node.

    childElementCount: number

    MDN Reference

    childNodes: NodeListOf<ChildNode>

    Returns the children.

    MDN Reference

    children: HTMLCollection

    Returns the child elements.

    MDN Reference

    className: string

    Returns the value of element's class content attribute. Can be set to change it.

    MDN Reference

    clientHeight: number

    MDN Reference

    clientLeft: number

    MDN Reference

    clientTop: number

    MDN Reference

    clientWidth: number

    MDN Reference

    COMMENT_NODE: 8

    node is a Comment node.

    contentEditable: string

    MDN Reference

    currentCSSZoom: number

    MDN Reference

    dataset: DOMStringMap

    MDN Reference

    dir: string

    MDN Reference

    DOCUMENT_FRAGMENT_NODE: 11

    node is a DocumentFragment node.

    DOCUMENT_NODE: 9

    node is a document.

    DOCUMENT_POSITION_CONTAINED_BY: 16

    Set when other is a descendant of node.

    DOCUMENT_POSITION_CONTAINS: 8

    Set when other is an ancestor of node.

    DOCUMENT_POSITION_DISCONNECTED: 1

    Set when node and other are not in the same tree.

    DOCUMENT_POSITION_FOLLOWING: 4

    Set when other is following node.

    DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32
    DOCUMENT_POSITION_PRECEDING: 2

    Set when other is preceding node.

    DOCUMENT_TYPE_NODE: 10

    node is a doctype.

    domContentLoadedController: LisDomContentLoadedController

    Components that use the LisPaginatedSearchMixin mixin can use this controller to subscribe to the DOMContentLoaded event. The advantage to using the controller instead of subscribing to the event directly is that the controller triggers a redraw of the component's template, meaning if a listener updates a property that should change the template, triggering a redraw of the template will be handled by the controller.

    downloadFunction?: DownloadFunction<PublicationSearchData>

    Components that use the LisPaginatedSearchMixin mixin will inherit this property. It stores an external function that can optionally be provided by users of the component that loads a file to download using the data from the component's submitted search form.

    draggable: boolean

    MDN Reference

    ELEMENT_NODE: 1

    node is an element.

    enterKeyHint: string

    MDN Reference

    ENTITY_NODE: 6
    ENTITY_REFERENCE_NODE: 5
    firstChild: null | ChildNode

    Returns the first child.

    MDN Reference

    firstElementChild: null | Element

    Returns the first child that is an element, and null otherwise.

    MDN Reference

    hidden: boolean

    MDN Reference

    id: string

    Returns the value of element's id content attribute. Can be set to change it.

    MDN Reference

    inert: boolean

    MDN Reference

    innerHTML: string

    MDN Reference

    innerText: string

    MDN Reference

    inputMode: string

    MDN Reference

    isConnected: boolean

    Returns true if node is connected and false otherwise.

    MDN Reference

    isContentEditable: boolean

    MDN Reference

    lang: string

    MDN Reference

    lastChild: null | ChildNode

    Returns the last child.

    MDN Reference

    lastElementChild: null | Element

    Returns the last child that is an element, and null otherwise.

    MDN Reference

    localName: string

    Returns the local name.

    MDN Reference

    namespaceURI: null | string

    Returns the namespace.

    MDN Reference

    nextElementSibling: null | Element

    Returns the first following sibling that is an element, and null otherwise.

    MDN Reference

    nextSibling: null | ChildNode

    Returns the next sibling.

    MDN Reference

    nodeName: string

    Returns a string appropriate for the type of node.

    MDN Reference

    nodeType: number

    Returns the type of node.

    MDN Reference

    nodeValue: null | string

    MDN Reference

    nonce?: string

    MDN Reference

    NOTATION_NODE: 12
    offsetHeight: number

    MDN Reference

    offsetLeft: number

    MDN Reference

    offsetParent: null | Element

    MDN Reference

    offsetTop: number

    MDN Reference

    offsetWidth: number

    MDN Reference

    onabort: null | ((this: GlobalEventHandlers, ev: UIEvent) => any)

    Fires when the user aborts the download.

    The event.

    MDN Reference

    onanimationcancel:
        | null
        | ((this: GlobalEventHandlers, ev: AnimationEvent) => any)

    MDN Reference

    onanimationend: null | ((this: GlobalEventHandlers, ev: AnimationEvent) => any)

    MDN Reference

    onanimationiteration:
        | null
        | ((this: GlobalEventHandlers, ev: AnimationEvent) => any)

    MDN Reference

    onanimationstart:
        | null
        | ((this: GlobalEventHandlers, ev: AnimationEvent) => any)

    MDN Reference

    onauxclick: null | ((this: GlobalEventHandlers, ev: MouseEvent) => any)

    MDN Reference

    onbeforeinput: null | ((this: GlobalEventHandlers, ev: InputEvent) => any)

    MDN Reference

    onbeforetoggle: null | ((this: GlobalEventHandlers, ev: Event) => any)

    MDN Reference

    onblur: null | ((this: GlobalEventHandlers, ev: FocusEvent) => any)

    Fires when the object loses the input focus.

    The focus event.

    MDN Reference

    oncancel: null | ((this: GlobalEventHandlers, ev: Event) => any)

    MDN Reference

    oncanplay: null | ((this: GlobalEventHandlers, ev: Event) => any)

    Occurs when playback is possible, but would require further buffering.

    The event.

    MDN Reference

    oncanplaythrough: null | ((this: GlobalEventHandlers, ev: Event) => any)

    MDN Reference

    onchange: null | ((this: GlobalEventHandlers, ev: Event) => any)

    Fires when the contents of the object or selection have changed.

    The event.

    MDN Reference

    onclick: null | ((this: GlobalEventHandlers, ev: MouseEvent) => any)

    Fires when the user clicks the left mouse button on the object

    The mouse event.

    MDN Reference

    onclose: null | ((this: GlobalEventHandlers, ev: Event) => any)

    MDN Reference

    oncontextlost: null | ((this: GlobalEventHandlers, ev: Event) => any)

    MDN Reference

    oncontextmenu: null | ((this: GlobalEventHandlers, ev: MouseEvent) => any)

    Fires when the user clicks the right mouse button in the client area, opening the context menu.

    The mouse event.

    MDN Reference

    oncontextrestored: null | ((this: GlobalEventHandlers, ev: Event) => any)

    MDN Reference

    oncopy: null | ((this: GlobalEventHandlers, ev: ClipboardEvent) => any)

    MDN Reference

    oncuechange: null | ((this: GlobalEventHandlers, ev: Event) => any)

    MDN Reference

    oncut: null | ((this: GlobalEventHandlers, ev: ClipboardEvent) => any)

    MDN Reference

    ondblclick: null | ((this: GlobalEventHandlers, ev: MouseEvent) => any)

    Fires when the user double-clicks the object.

    The mouse event.

    MDN Reference

    ondrag: null | ((this: GlobalEventHandlers, ev: DragEvent) => any)

    Fires on the source object continuously during a drag operation.

    The event.

    MDN Reference

    ondragend: null | ((this: GlobalEventHandlers, ev: DragEvent) => any)

    Fires on the source object when the user releases the mouse at the close of a drag operation.

    The event.

    MDN Reference

    ondragenter: null | ((this: GlobalEventHandlers, ev: DragEvent) => any)

    Fires on the target element when the user drags the object to a valid drop target.

    The drag event.

    MDN Reference

    ondragleave: null | ((this: GlobalEventHandlers, ev: DragEvent) => any)

    Fires on the target object when the user moves the mouse out of a valid drop target during a drag operation.

    The drag event.

    MDN Reference

    ondragover: null | ((this: GlobalEventHandlers, ev: DragEvent) => any)

    Fires on the target element continuously while the user drags the object over a valid drop target.

    The event.

    MDN Reference

    ondragstart: null | ((this: GlobalEventHandlers, ev: DragEvent) => any)

    Fires on the source object when the user starts to drag a text selection or selected object.

    The event.

    MDN Reference

    ondrop: null | ((this: GlobalEventHandlers, ev: DragEvent) => any)

    MDN Reference

    ondurationchange: null | ((this: GlobalEventHandlers, ev: Event) => any)

    Occurs when the duration attribute is updated.

    The event.

    MDN Reference

    onemptied: null | ((this: GlobalEventHandlers, ev: Event) => any)

    Occurs when the media element is reset to its initial state.

    The event.

    MDN Reference

    onended: null | ((this: GlobalEventHandlers, ev: Event) => any)

    Occurs when the end of playback is reached.

    The event

    MDN Reference

    onerror: OnErrorEventHandler

    Fires when an error occurs during object loading.

    The event.

    MDN Reference

    onfocus: null | ((this: GlobalEventHandlers, ev: FocusEvent) => any)

    Fires when the object receives focus.

    The event.

    MDN Reference

    onformdata: null | ((this: GlobalEventHandlers, ev: FormDataEvent) => any)

    MDN Reference

    onfullscreenchange: null | ((this: Element, ev: Event) => any)

    MDN Reference

    onfullscreenerror: null | ((this: Element, ev: Event) => any)

    MDN Reference

    ongotpointercapture:
        | null
        | ((this: GlobalEventHandlers, ev: PointerEvent) => any)

    MDN Reference

    oninput: null | ((this: GlobalEventHandlers, ev: Event) => any)

    MDN Reference

    oninvalid: null | ((this: GlobalEventHandlers, ev: Event) => any)

    MDN Reference

    onkeydown: null | ((this: GlobalEventHandlers, ev: KeyboardEvent) => any)

    Fires when the user presses a key.

    The keyboard event

    MDN Reference

    onkeypress: null | ((this: GlobalEventHandlers, ev: KeyboardEvent) => any)

    Fires when the user presses an alphanumeric key.

    The event.

    MDN Reference

    onkeyup: null | ((this: GlobalEventHandlers, ev: KeyboardEvent) => any)

    Fires when the user releases a key.

    The keyboard event

    MDN Reference

    onload: null | ((this: GlobalEventHandlers, ev: Event) => any)

    Fires immediately after the browser loads the object.

    The event.

    MDN Reference

    onloadeddata: null | ((this: GlobalEventHandlers, ev: Event) => any)

    Occurs when media data is loaded at the current playback position.

    The event.

    MDN Reference

    onloadedmetadata: null | ((this: GlobalEventHandlers, ev: Event) => any)

    Occurs when the duration and dimensions of the media have been determined.

    The event.

    MDN Reference

    onloadstart: null | ((this: GlobalEventHandlers, ev: Event) => any)

    Occurs when Internet Explorer begins looking for media data.

    The event.

    MDN Reference

    onlostpointercapture:
        | null
        | ((this: GlobalEventHandlers, ev: PointerEvent) => any)

    MDN Reference

    onmousedown: null | ((this: GlobalEventHandlers, ev: MouseEvent) => any)

    Fires when the user clicks the object with either mouse button.

    The mouse event.

    MDN Reference

    onmouseenter: null | ((this: GlobalEventHandlers, ev: MouseEvent) => any)

    MDN Reference

    onmouseleave: null | ((this: GlobalEventHandlers, ev: MouseEvent) => any)

    MDN Reference

    onmousemove: null | ((this: GlobalEventHandlers, ev: MouseEvent) => any)

    Fires when the user moves the mouse over the object.

    The mouse event.

    MDN Reference

    onmouseout: null | ((this: GlobalEventHandlers, ev: MouseEvent) => any)

    Fires when the user moves the mouse pointer outside the boundaries of the object.

    The mouse event.

    MDN Reference

    onmouseover: null | ((this: GlobalEventHandlers, ev: MouseEvent) => any)

    Fires when the user moves the mouse pointer into the object.

    The mouse event.

    MDN Reference

    onmouseup: null | ((this: GlobalEventHandlers, ev: MouseEvent) => any)

    Fires when the user releases a mouse button while the mouse is over the object.

    The mouse event.

    MDN Reference

    onpaste: null | ((this: GlobalEventHandlers, ev: ClipboardEvent) => any)

    MDN Reference

    onpause: null | ((this: GlobalEventHandlers, ev: Event) => any)

    Occurs when playback is paused.

    The event.

    MDN Reference

    onplay: null | ((this: GlobalEventHandlers, ev: Event) => any)

    Occurs when the play method is requested.

    The event.

    MDN Reference

    onplaying: null | ((this: GlobalEventHandlers, ev: Event) => any)

    Occurs when the audio or video has started playing.

    The event.

    MDN Reference

    onpointercancel: null | ((this: GlobalEventHandlers, ev: PointerEvent) => any)

    MDN Reference

    onpointerdown: null | ((this: GlobalEventHandlers, ev: PointerEvent) => any)

    MDN Reference

    onpointerenter: null | ((this: GlobalEventHandlers, ev: PointerEvent) => any)

    MDN Reference

    onpointerleave: null | ((this: GlobalEventHandlers, ev: PointerEvent) => any)

    MDN Reference

    onpointermove: null | ((this: GlobalEventHandlers, ev: PointerEvent) => any)

    MDN Reference

    onpointerout: null | ((this: GlobalEventHandlers, ev: PointerEvent) => any)

    MDN Reference

    onpointerover: null | ((this: GlobalEventHandlers, ev: PointerEvent) => any)

    MDN Reference

    onpointerup: null | ((this: GlobalEventHandlers, ev: PointerEvent) => any)

    MDN Reference

    onprogress: null | ((this: GlobalEventHandlers, ev: ProgressEvent) => any)

    Occurs to indicate progress while downloading media data.

    The event.

    MDN Reference

    onratechange: null | ((this: GlobalEventHandlers, ev: Event) => any)

    Occurs when the playback rate is increased or decreased.

    The event.

    MDN Reference

    onreset: null | ((this: GlobalEventHandlers, ev: Event) => any)

    Fires when the user resets a form.

    The event.

    MDN Reference

    onresize: null | ((this: GlobalEventHandlers, ev: UIEvent) => any)

    MDN Reference

    onscroll: null | ((this: GlobalEventHandlers, ev: Event) => any)

    Fires when the user repositions the scroll box in the scroll bar on the object.

    The event.

    MDN Reference

    onscrollend: null | ((this: GlobalEventHandlers, ev: Event) => any)

    MDN Reference

    onsecuritypolicyviolation:
        | null
        | ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any)

    MDN Reference

    onseeked: null | ((this: GlobalEventHandlers, ev: Event) => any)

    Occurs when the seek operation ends.

    The event.

    MDN Reference

    onseeking: null | ((this: GlobalEventHandlers, ev: Event) => any)

    Occurs when the current playback position is moved.

    The event.

    MDN Reference

    onselect: null | ((this: GlobalEventHandlers, ev: Event) => any)

    Fires when the current selection changes.

    The event.

    MDN Reference

    onselectionchange: null | ((this: GlobalEventHandlers, ev: Event) => any)

    MDN Reference

    onselectstart: null | ((this: GlobalEventHandlers, ev: Event) => any)

    MDN Reference

    onslotchange: null | ((this: GlobalEventHandlers, ev: Event) => any)

    MDN Reference

    onstalled: null | ((this: GlobalEventHandlers, ev: Event) => any)

    Occurs when the download has stopped.

    The event.

    MDN Reference

    onsubmit: null | ((this: GlobalEventHandlers, ev: SubmitEvent) => any)

    MDN Reference

    onsuspend: null | ((this: GlobalEventHandlers, ev: Event) => any)

    Occurs if the load operation has been intentionally halted.

    The event.

    MDN Reference

    ontimeupdate: null | ((this: GlobalEventHandlers, ev: Event) => any)

    Occurs to indicate the current playback position.

    The event.

    MDN Reference

    ontoggle: null | ((this: GlobalEventHandlers, ev: Event) => any)

    MDN Reference

    ontouchcancel?: null | ((this: GlobalEventHandlers, ev: TouchEvent) => any)

    MDN Reference

    ontouchend?: null | ((this: GlobalEventHandlers, ev: TouchEvent) => any)

    MDN Reference

    ontouchmove?: null | ((this: GlobalEventHandlers, ev: TouchEvent) => any)

    MDN Reference

    ontouchstart?: null | ((this: GlobalEventHandlers, ev: TouchEvent) => any)

    MDN Reference

    ontransitioncancel:
        | null
        | ((this: GlobalEventHandlers, ev: TransitionEvent) => any)

    MDN Reference

    ontransitionend:
        | null
        | ((this: GlobalEventHandlers, ev: TransitionEvent) => any)

    MDN Reference

    ontransitionrun:
        | null
        | ((this: GlobalEventHandlers, ev: TransitionEvent) => any)

    MDN Reference

    ontransitionstart:
        | null
        | ((this: GlobalEventHandlers, ev: TransitionEvent) => any)

    MDN Reference

    onvolumechange: null | ((this: GlobalEventHandlers, ev: Event) => any)

    Occurs when the volume is changed, or playback is muted or unmuted.

    The event.

    MDN Reference

    onwaiting: null | ((this: GlobalEventHandlers, ev: Event) => any)

    Occurs when playback stops because the next frame of a video resource is not available.

    The event.

    MDN Reference

    onwebkitanimationend: null | ((this: GlobalEventHandlers, ev: Event) => any)

    This is a legacy alias of onanimationend.

    MDN Reference

    onwebkitanimationiteration:
        | null
        | ((this: GlobalEventHandlers, ev: Event) => any)

    This is a legacy alias of onanimationiteration.

    MDN Reference

    onwebkitanimationstart: null | ((this: GlobalEventHandlers, ev: Event) => any)

    This is a legacy alias of onanimationstart.

    MDN Reference

    onwebkittransitionend: null | ((this: GlobalEventHandlers, ev: Event) => any)

    This is a legacy alias of ontransitionend.

    MDN Reference

    onwheel: null | ((this: GlobalEventHandlers, ev: WheelEvent) => any)

    MDN Reference

    outerHTML: string

    MDN Reference

    outerText: string

    MDN Reference

    ownerDocument: Document

    Returns the node document. Returns null for documents.

    MDN Reference

    parentElement: null | HTMLElement

    Returns the parent element.

    MDN Reference

    parentNode: null | ParentNode

    Returns the parent.

    MDN Reference

    popover: null | string

    MDN Reference

    prefix: null | string

    Returns the namespace prefix.

    MDN Reference

    previousElementSibling: null | Element

    Returns the first preceding sibling that is an element, and null otherwise.

    MDN Reference

    previousSibling: null | ChildNode

    Returns the previous sibling.

    MDN Reference

    PROCESSING_INSTRUCTION_NODE: 7

    node is a ProcessingInstruction node.

    queryStringController: LisQueryStringParametersController

    Components that use the LisPaginatedSearchMixin mixin can use this controller to interact with URL query string parameters. For example, it can be used to set values of form elements reactively, i.e. if the query string parameter a form element gets its value changes, then the element's value will be updated in the component's template.

    queryStringReflection: boolean

    The LisPaginatedSearchMixin mixin will automatically reflect all form field values in the URL querystring parameters. Set this property to false to disable this behavior.

    requiredQueryStringParams: string[][]

    The LisPaginatedSearchMixin mixin will automatically perform a search when loaded if certain parameters are present in the URL query string. Components that use the mixin can specify what parameters are necessary by setting this property in their constructor. Specifically, this property represents groups of parameters that will trigger a search if all parameters within a group are present.

    resultAttributes: string[]

    Components that use the LisPaginatedSearchMixin mixin must define what attributes their search results will have so the mixin can correctly parse and display the results in a table. These attributes can be specified by setting this property in a component's constructor. Additionally, this property may be used by the end user at run-time to override the default result attributes defined by the component.

    role: null | string
    scrollHeight: number

    MDN Reference

    scrollLeft: number

    MDN Reference

    scrollTop: number

    MDN Reference

    scrollWidth: number

    MDN Reference

    searchFunction: SearchFunction<PublicationSearchData, PublicationSearchResult>

    Components that use the LisPaginatedSearchMixin mixin will inherit this property. It stores an external function that must be provided by users of the component that performs a search using the data from the component's submitted search form.

    searchResults: PublicationSearchResult[]

    The results returned by the searchFunction.

    shadowRoot: null | ShadowRoot

    Returns element's shadow root, if any, and if shadow root's mode is "open", and null otherwise.

    MDN Reference

    slot: string

    Returns the value of element's slot content attribute. Can be set to change it.

    MDN Reference

    spellcheck: boolean

    MDN Reference

    tabIndex: number

    MDN Reference

    tableColumnClasses: StringObjectModel

    Components that use the LisPaginatedSearchMixin mixin can optionally define CSS classes for the columns of the table results are displayed in a table. The classes are set from an object that has attributes matching the resultAttributes. The object can be specified by setting this property in a component's constructor. Additionally, this property may be used by the end used at run-time to override the default table column classes defined by the component.

    tableHeader: StringObjectModel

    Components that use the LisPaginatedSearchMixin mixin must define what attributes their search results will have so the mixin can correctly parse and display the results in a table. The header of the table is set from an object that has these attributes. The object can be specified by setting this property in a component's constructor. Additionally, this property may be used by the end used at run-time to override the default table headers defined by the component.

    tagName: string

    Returns the HTML-uppercased qualified name.

    MDN Reference

    ReadonlyTEXT_NODE

    TEXT_NODE: 3

    node is a Text node.

    textContent: null | string

    MDN Reference

    title: string

    MDN Reference

    titleExample?: string

    An optional property to set the example text for the search field.

    translate: boolean

    MDN Reference

    writingSuggestions: string

    MDN Reference

    Static_$litElement$

    _$litElement$: boolean

    Static Optional_initializers

    _initializers?: Initializer[]
    "[metadata]": object & Record<PropertyKey, unknown>
    finalized: undefined | true

    Marks class as having been finalized, which includes creating properties from static properties, but does not include all properties created from decorators.

    • get classList(): DOMTokenList

      Allows for manipulation of element's class content attribute as a set of whitespace-separated tokens through a DOMTokenList object.

      MDN Reference

      Returns DOMTokenList

    • set classList(value: string): void

      Parameters

      • value: string

      Returns void

    • get part(): DOMTokenList

      MDN Reference

      Returns DOMTokenList

    • set part(value: string): void

      Parameters

      • value: string

      Returns void

    • get style(): CSSStyleDeclaration

      MDN Reference

      Returns CSSStyleDeclaration

    • set style(cssText: string): void

      Parameters

      • cssText: string

      Returns void

    • Type Parameters

      • K extends keyof HTMLElementEventMap

      Parameters

      • type: K
      • listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any
      • Optionaloptions: boolean | AddEventListenerOptions

      Returns void

    • Parameters

      • type: string
      • listener: EventListenerOrEventListenerObject
      • Optionaloptions: boolean | AddEventListenerOptions

      Returns void

    • Inserts nodes just after node, while replacing strings in nodes with equivalent Text nodes.

      Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.

      MDN Reference

      Parameters

      • ...nodes: (string | Node)[]

      Returns void

    • MDN Reference

      Parameters

      • keyframes: null | PropertyIndexedKeyframes | Keyframe[]
      • Optionaloptions: number | KeyframeAnimationOptions

      Returns Animation

    • Inserts nodes after the last child of node, while replacing strings in nodes with equivalent Text nodes.

      Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.

      MDN Reference

      Parameters

      • ...nodes: (string | Node)[]

      Returns void

    • MDN Reference

      Type Parameters

      • T extends Node

      Parameters

      • node: T

      Returns T

    • MDN Reference

      Returns ElementInternals

    • Creates a shadow root for element and returns it.

      MDN Reference

      Parameters

      • init: ShadowRootInit

      Returns ShadowRoot

    • Inserts nodes just before node, while replacing strings in nodes with equivalent Text nodes.

      Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.

      MDN Reference

      Parameters

      • ...nodes: (string | Node)[]

      Returns void

    • MDN Reference

      Returns void

    • MDN Reference

      Parameters

      • Optionaloptions: CheckVisibilityOptions

      Returns boolean

    • MDN Reference

      Returns void

    • Returns a copy of node. If deep is true, the copy also includes the node's descendants.

      MDN Reference

      Parameters

      • Optionalsubtree: boolean

      Returns Node

    • Returns the first (starting at element) inclusive ancestor that matches selectors, and null otherwise.

      MDN Reference

      Type Parameters

      • K extends keyof HTMLElementTagNameMap

      Parameters

      • selector: K

      Returns null | HTMLElementTagNameMap[K]

    • Type Parameters

      • K extends keyof SVGElementTagNameMap

      Parameters

      • selector: K

      Returns null | SVGElementTagNameMap[K]

    • Type Parameters

      • K extends keyof MathMLElementTagNameMap

      Parameters

      • selector: K

      Returns null | MathMLElementTagNameMap[K]

    • Type Parameters

      • E extends Element = Element

      Parameters

      • selectors: string

      Returns null | E

    • Returns a bitmask indicating the position of other relative to node.

      MDN Reference

      Parameters

      • other: Node

      Returns number

    • MDN Reference

      Returns StylePropertyMapReadOnly

    • Returns true if other is an inclusive descendant of node, and false otherwise.

      MDN Reference

      Parameters

      • other: null | Node

      Returns boolean

    • Dispatches a synthetic event event to target and returns true if either event's cancelable attribute value is false or its preventDefault() method was not invoked, and false otherwise.

      MDN Reference

      Parameters

      Returns boolean

    • MDN Reference

      Parameters

      • Optionaloptions: FocusOptions

      Returns void

    • When the form of a component that use the LisPaginatedSearchMixin mixin is submitted, the mixin parses the form contents into a !FormData | FormData instance. This instance is converted into a simple object mapping form element names to their values. This conversion is done with the formToObject method. If the object doesn't match the expected SearchData template type or if there are redundant names in the !FormData | FormData instance that need to be resolved, then the component should override the formToObject method.

      Parameters

      • formData: FormData

        The !FormData | FormData instance to convert into an object.

      Returns PublicationSearchData

      The object generated from the given !FormData | FormData instance.

    • MDN Reference

      Parameters

      • Optionaloptions: GetAnimationsOptions

      Returns Animation[]

    • Returns element's first attribute whose qualified name is qualifiedName, and null if there is no such attribute otherwise.

      MDN Reference

      Parameters

      • qualifiedName: string

      Returns null | string

    • Returns the qualified names of all element's attributes. Can contain duplicates.

      MDN Reference

      Returns string[]

    • MDN Reference

      Parameters

      • qualifiedName: string

      Returns null | Attr

    • MDN Reference

      Parameters

      • namespace: null | string
      • localName: string

      Returns null | Attr

    • Returns element's attribute whose namespace is namespace and local name is localName, and null if there is no such attribute otherwise.

      MDN Reference

      Parameters

      • namespace: null | string
      • localName: string

      Returns null | string

    • MDN Reference

      Returns DOMRect

    • MDN Reference

      Returns DOMRectList

    • Returns a HTMLCollection of the elements in the object on which the method was invoked (a document or an element) that have all the classes given by classNames. The classNames argument is interpreted as a space-separated list of classes.

      MDN Reference

      Parameters

      • classNames: string

      Returns HTMLCollectionOf<Element>

    • MDN Reference

      Type Parameters

      • K extends keyof HTMLElementTagNameMap

      Parameters

      • qualifiedName: K

      Returns HTMLCollectionOf<HTMLElementTagNameMap[K]>

    • Type Parameters

      • K extends keyof SVGElementTagNameMap

      Parameters

      • qualifiedName: K

      Returns HTMLCollectionOf<SVGElementTagNameMap[K]>

    • Type Parameters

      • K extends keyof MathMLElementTagNameMap

      Parameters

      • qualifiedName: K

      Returns HTMLCollectionOf<MathMLElementTagNameMap[K]>

    • Type Parameters

      • K extends keyof HTMLElementDeprecatedTagNameMap

      Parameters

      • qualifiedName: K

      Returns HTMLCollectionOf<HTMLElementDeprecatedTagNameMap[K]>

    • Parameters

      • qualifiedName: string

      Returns HTMLCollectionOf<Element>

    • MDN Reference

      Parameters

      • namespaceURI: "http://www.w3.org/1999/xhtml"
      • localName: string

      Returns HTMLCollectionOf<HTMLElement>

    • Parameters

      • namespaceURI: "http://www.w3.org/2000/svg"
      • localName: string

      Returns HTMLCollectionOf<SVGElement>

    • Parameters

      • namespaceURI: "http://www.w3.org/1998/Math/MathML"
      • localName: string

      Returns HTMLCollectionOf<MathMLElement>

    • Parameters

      • namespace: null | string
      • localName: string

      Returns HTMLCollectionOf<Element>

    • MDN Reference

      Parameters

      • Optionaloptions: GetHTMLOptions

      Returns string

    • Returns node's root.

      MDN Reference

      Parameters

      • Optionaloptions: GetRootNodeOptions

      Returns Node

    • Returns true if element has an attribute whose qualified name is qualifiedName, and false otherwise.

      MDN Reference

      Parameters

      • qualifiedName: string

      Returns boolean

    • Returns true if element has an attribute whose namespace is namespace and local name is localName.

      MDN Reference

      Parameters

      • namespace: null | string
      • localName: string

      Returns boolean

    • Returns true if element has attributes, and false otherwise.

      MDN Reference

      Returns boolean

    • Returns whether node has children.

      MDN Reference

      Returns boolean

    • MDN Reference

      Parameters

      • pointerId: number

      Returns boolean

    • MDN Reference

      Returns void

    • MDN Reference

      Parameters

      • where: InsertPosition
      • element: Element

      Returns null | Element

    • MDN Reference

      Parameters

      • position: InsertPosition
      • string: string

      Returns void

    • MDN Reference

      Parameters

      • where: InsertPosition
      • data: string

      Returns void

    • MDN Reference

      Type Parameters

      • T extends Node

      Parameters

      • node: T
      • child: null | Node

      Returns T

    • MDN Reference

      Parameters

      • namespace: null | string

      Returns boolean

    • Returns whether node and otherNode have the same properties.

      MDN Reference

      Parameters

      • otherNode: null | Node

      Returns boolean

    • MDN Reference

      Parameters

      • otherNode: null | Node

      Returns boolean

    • MDN Reference

      Parameters

      • prefix: null | string

      Returns null | string

    • MDN Reference

      Parameters

      • namespace: null | string

      Returns null | string

    • Returns true if matching selectors against element's root yields element, and false otherwise.

      MDN Reference

      Parameters

      • selectors: string

      Returns boolean

    • Removes empty exclusive Text nodes and concatenates the data of remaining contiguous exclusive Text nodes into the first of their nodes.

      MDN Reference

      Returns void

    • Inserts nodes before the first child of node, while replacing strings in nodes with equivalent Text nodes.

      Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.

      MDN Reference

      Parameters

      • ...nodes: (string | Node)[]

      Returns void

    • Returns the first element that is a descendant of node that matches selectors.

      MDN Reference

      Type Parameters

      • K extends keyof HTMLElementTagNameMap

      Parameters

      • selectors: K

      Returns null | HTMLElementTagNameMap[K]

    • Type Parameters

      • K extends keyof SVGElementTagNameMap

      Parameters

      • selectors: K

      Returns null | SVGElementTagNameMap[K]

    • Type Parameters

      • K extends keyof MathMLElementTagNameMap

      Parameters

      • selectors: K

      Returns null | MathMLElementTagNameMap[K]

    • Type Parameters

      • K extends keyof HTMLElementDeprecatedTagNameMap

      Parameters

      • selectors: K

      Returns null | HTMLElementDeprecatedTagNameMap[K]

    • Type Parameters

      • E extends Element = Element

      Parameters

      • selectors: string

      Returns null | E

    • Returns all element descendants of node that match selectors.

      MDN Reference

      Type Parameters

      • K extends keyof HTMLElementTagNameMap

      Parameters

      • selectors: K

      Returns NodeListOf<HTMLElementTagNameMap[K]>

    • Type Parameters

      • K extends keyof SVGElementTagNameMap

      Parameters

      • selectors: K

      Returns NodeListOf<SVGElementTagNameMap[K]>

    • Type Parameters

      • K extends keyof MathMLElementTagNameMap

      Parameters

      • selectors: K

      Returns NodeListOf<MathMLElementTagNameMap[K]>

    • Type Parameters

      • K extends keyof HTMLElementDeprecatedTagNameMap

      Parameters

      • selectors: K

      Returns NodeListOf<HTMLElementDeprecatedTagNameMap[K]>

    • Type Parameters

      • E extends Element = Element

      Parameters

      • selectors: string

      Returns NodeListOf<E>

    • MDN Reference

      Parameters

      • pointerId: number

      Returns void

    • Removes node.

      MDN Reference

      Returns void

    • Removes element's first attribute whose qualified name is qualifiedName.

      MDN Reference

      Parameters

      • qualifiedName: string

      Returns void

    • MDN Reference

      Parameters

      • attr: Attr

      Returns Attr

    • Removes element's attribute whose namespace is namespace and local name is localName.

      MDN Reference

      Parameters

      • namespace: null | string
      • localName: string

      Returns void

    • MDN Reference

      Type Parameters

      • T extends Node

      Parameters

      • child: T

      Returns T

    • Type Parameters

      • K extends keyof HTMLElementEventMap

      Parameters

      • type: K
      • listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any
      • Optionaloptions: boolean | EventListenerOptions

      Returns void

    • Parameters

      • type: string
      • listener: EventListenerOrEventListenerObject
      • Optionaloptions: boolean | EventListenerOptions

      Returns void

    • By default, the LisPaginatedSearchMixin displays search results using the LisSimpleTableElement. Components that use the mixin can override this portion of the template by implementing their own renderResults method. The results data will be available via the inherited searchResults variable.

      Returns unknown

      The results portion of the template.

    • By default, the LisPaginatedSearchMixin displays search results info using the in paragraph tags. Components that use the mixin can override this portion of the template by implementing their own renderResultsInfo method.

      Returns unknown

      The results info portion of the template.

    • MDN Reference

      Type Parameters

      • T extends Node

      Parameters

      • node: Node
      • child: T

      Returns T

    • Replace all children of node with nodes, while replacing strings in nodes with equivalent Text nodes.

      Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.

      MDN Reference

      Parameters

      • ...nodes: (string | Node)[]

      Returns void

    • Replaces node with nodes, while replacing strings in nodes with equivalent Text nodes.

      Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.

      MDN Reference

      Parameters

      • ...nodes: (string | Node)[]

      Returns void

    • Displays element fullscreen and resolves promise when done.

      When supplied, options's navigationUI member indicates whether showing navigation UI while in fullscreen is preferred or not. If set to "show", navigation simplicity is preferred over screen space, and if set to "hide", more screen space is preferred. User agents are always free to honor user preference over the application's. The default value "auto" indicates no application preference.

      MDN Reference

      Parameters

      • Optionaloptions: FullscreenOptions

      Returns Promise<void>

    • MDN Reference

      Parameters

      • Optionaloptions: PointerLockOptions

      Returns Promise<void>

    • MDN Reference

      Parameters

      • Optionaloptions: ScrollToOptions

      Returns void

    • Parameters

      • x: number
      • y: number

      Returns void

    • MDN Reference

      Parameters

      • Optionaloptions: ScrollToOptions

      Returns void

    • Parameters

      • x: number
      • y: number

      Returns void

    • MDN Reference

      Parameters

      • Optionalarg: boolean | ScrollIntoViewOptions

      Returns void

    • MDN Reference

      Parameters

      • Optionaloptions: ScrollToOptions

      Returns void

    • Parameters

      • x: number
      • y: number

      Returns void

    • Sets the value of element's first attribute whose qualified name is qualifiedName to value.

      MDN Reference

      Parameters

      • qualifiedName: string
      • value: string

      Returns void

    • MDN Reference

      Parameters

      • attr: Attr

      Returns null | Attr

    • MDN Reference

      Parameters

      • attr: Attr

      Returns null | Attr

    • Sets the value of element's attribute whose namespace is namespace and local name is localName to value.

      MDN Reference

      Parameters

      • namespace: null | string
      • qualifiedName: string
      • value: string

      Returns void

    • MDN Reference

      Parameters

      • html: string

      Returns void

    • MDN Reference

      Parameters

      • pointerId: number

      Returns void

    • MDN Reference

      Returns void

    • Components that use the LisPaginatedSearchMixin mixin will inherit this method. It allows the component's search form to be submitted programmatically.

      Returns void

    • If force is not given, "toggles" qualifiedName, removing it if it is present and adding it if it is not present. If force is true, adds qualifiedName. If force is false, removes qualifiedName.

      Returns true if qualifiedName is now present, and false otherwise.

      MDN Reference

      Parameters

      • qualifiedName: string
      • Optionalforce: boolean

      Returns boolean

    • MDN Reference

      Parameters

      • Optionaloptions: boolean

      Returns boolean

    • A helper method that returns that first value that's defined: the given value, the value of the specified querystring parameter, an empty string.

      Parameters

      • value: undefined | string

        The value to potentially return.

      • parameter: string

        The querystring parameter to potentially return the value of.

      Returns string

      The first value that was defined.

    • Parameters

      • selectors: string

      Returns boolean

      This is a legacy alias of matches.

      MDN Reference

    • Adds an initializer function to the class that is called during instance construction.

      This is useful for code that runs against a ReactiveElement subclass, such as a decorator, that needs to do work for each instance, such as setting up a ReactiveController.

      const myDecorator = (target: typeof ReactiveElement, key: string) => {
        target.addInitializer((instance: ReactiveElement) => {
          // This is run during construction of the element
          new MyController(instance);
        });
      }

      Decorating a field will then cause each instance to run an initializer that adds a controller:

      class MyElement extends LitElement {
        @myDecorator foo;
      }

      Initializers are stored per-constructor. Adding an initializer to a subclass does not add it to a superclass. Since initializers are run in constructors, initializers will run in order of the class hierarchy, starting with superclasses and progressing to the instance's class.

      Parameters

      • initializer: Initializer

      Returns void

    • Finishes setting up the class so that it's ready to be registered as a custom element and instantiated.

      This method is called by the ReactiveElement.observedAttributes getter. If you override the observedAttributes getter, you must either call super.observedAttributes to trigger finalization, or call finalize() yourself.

      Returns void

    attributes

    • get observedAttributes(): string[]

      Returns a list of attributes corresponding to the registered properties.

      Returns string[]

    • Synchronizes property values when attributes change.

      Specifically, when an attribute is set, the corresponding property is set. You should rarely need to implement this callback. If this method is overridden, super.attributeChangedCallback(name, _old, value) must be called.

      See responding to attribute changes on MDN for more information about the attributeChangedCallback.

      Parameters

      • name: string
      • _old: null | string
      • value: null | string

      Returns void

    controllers

    • Registers a ReactiveController to participate in the element's reactive update cycle. The element automatically calls into any registered controllers during its lifecycle callbacks.

      If the element is connected when addController() is called, the controller's hostConnected() callback will be immediately called.

      Parameters

      • controller: ReactiveController

      Returns void

    • Removes a ReactiveController from the element.

      Parameters

      • controller: ReactiveController

      Returns void

    dev-mode

    disableWarning?: (warningKind: WarningKind) => void

    Disable the given warning category for this class.

    This method only exists in development builds, so it should be accessed with a guard like:

    // Disable for all ReactiveElement subclasses
    ReactiveElement.disableWarning?.('migration');

    // Disable for only MyElement and subclasses
    MyElement.disableWarning?.('migration');
    enabledWarnings?: WarningKind[]

    Read or set all the enabled warning categories for this class.

    This property is only used in development builds.

    enableWarning?: (warningKind: WarningKind) => void

    Enable the given warning category for this class.

    This method only exists in development builds, so it should be accessed with a guard like:

    // Enable for all ReactiveElement subclasses
    ReactiveElement.enableWarning?.('migration');

    // Enable for only MyElement and subclasses
    MyElement.enableWarning?.('migration');

    lifecycle

    • Invoked when the component is added to the document's DOM.

      In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.

      connectedCallback() {
        super.connectedCallback();
        addEventListener('keydown', this._handleKeydown);
      }

      Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback().

      Returns void

    • Invoked when the component is removed from the document's DOM.

      This callback is the main signal to the element that it may no longer be used. disconnectedCallback() should ensure that nothing is holding a reference to the element (such as event listeners added to nodes external to the element), so that it is free to be garbage collected.

      disconnectedCallback() {
        super.disconnectedCallback();
        window.removeEventListener('keydown', this._handleKeydown);
      }

      An element may be re-connected after being disconnected.

      Returns void

    properties

    elementProperties: PropertyDeclarationMap

    Memoized list of all element properties, including any superclass properties. Created lazily on user subclasses when finalizing the class.

    properties: PropertyDeclarations

    User-supplied object that maps property names to PropertyDeclaration objects containing options for configuring reactive properties. When a reactive property is set the element will update and render.

    By default properties are public fields, and as such, they should be considered as primarily settable by element users, either via attribute or the property itself.

    Generally, properties that are changed by the element should be private or protected fields and should use the state: true option. Properties marked as state do not reflect from the corresponding attribute

    However, sometimes element code does need to set a public property. This should typically only be done in response to user interaction, and an event should be fired informing the user; for example, a checkbox sets its checked property when clicked and fires a changed event. Mutating public properties should typically not be done for non-primitive (object or array) properties. In other cases when an element needs to manage state, a private property set with the state: true option should be used. When needed, state properties can be initialized via public properties to facilitate complex interactions.

    • Creates a property accessor on the element prototype if one does not exist and stores a PropertyDeclaration for the property with the given options. The property setter calls the property's hasChanged property option or uses a strict identity check to determine whether or not to request an update.

      This method may be overridden to customize properties; however, when doing so, it's important to call super.createProperty to ensure the property is setup correctly. This method calls getPropertyDescriptor internally to get a descriptor to install. To customize what properties do when they are get or set, override getPropertyDescriptor. To customize the options for a property, implement createProperty like this:

      static createProperty(name, options) {
        options = Object.assign(options, {myOption: true});
        super.createProperty(name, options);
      }

      Parameters

      • name: PropertyKey
      • Optionaloptions: PropertyDeclaration<unknown, unknown>

      Returns void

    • Returns a property descriptor to be defined on the given named property. If no descriptor is returned, the property will not become an accessor. For example,

      class MyElement extends LitElement {
        static getPropertyDescriptor(name, key, options) {
          const defaultDescriptor =
              super.getPropertyDescriptor(name, key, options);
          const setter = defaultDescriptor.set;
          return {
            get: defaultDescriptor.get,
            set(value) {
              setter.call(this, value);
              // custom action.
            },
            configurable: true,
            enumerable: true
          }
        }
      }

      Parameters

      • name: PropertyKey
      • key: string | symbol
      • options: PropertyDeclaration

      Returns undefined | PropertyDescriptor

    • Returns the property options associated with the given property. These options are defined with a PropertyDeclaration via the properties object or the @property decorator and are registered in createProperty(...).

      Note, this method should be considered "final" and not overridden. To customize the options for a given property, override createProperty.

      Parameters

      • name: PropertyKey

      Returns PropertyDeclaration<unknown, unknown>

    rendering

    renderOptions: RenderOptions
    renderRoot: DocumentFragment | HTMLElement

    Node or ShadowRoot into which element DOM should be rendered. Defaults to an open shadowRoot.

    shadowRootOptions: ShadowRootInit

    Options used when calling attachShadow. Set this property to customize the options for the shadowRoot; for example, to create a closed shadowRoot: {mode: 'closed'}.

    Note, these options are used in createRenderRoot. If this method is customized, options should be respected if possible.

    • Returns DocumentFragment | HTMLElement

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

      Returns unknown

    styles

    elementStyles: CSSResultOrNative[]

    Memoized list of all element styles. Created lazily on user subclasses when finalizing the class.

    • Takes the styles the user supplied via the static styles property and returns the array of styles to apply to the element. Override this method to integrate into a style management system.

      Styles are deduplicated preserving the last instance in the list. This is a performance optimization to avoid duplicated styles that can occur especially when composing via subclassing. The last item is kept to try to preserve the cascade order with the assumption that it's most important that last added styles override previous styles.

      Parameters

      • Optionalstyles: CSSResultGroup

      Returns CSSResultOrNative[]

    updates

    hasUpdated: boolean

    Is set to true after the first update. The element code cannot assume that renderRoot exists before the element hasUpdated.

    isUpdatePending: boolean

    True if there is a pending update as a result of calling requestUpdate(). Should only be read.

    • get updateComplete(): Promise<boolean>

      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<boolean>

      A promise of a boolean that resolves to true if the update completed without triggering another update.

    • Note, this method should be considered final and not overridden. It is overridden on the element instance with a function that triggers the first update.

      Parameters

      • _requestedUpdate: boolean

      Returns void

    • Invoked when the element is first updated. Implement to perform one time work on the element after update.

      firstUpdated() {
        this.renderRoot.getElementById('my-text-area').focus();
      }

      Setting properties inside this method will trigger the element to update again after this update cycle completes.

      Parameters

      • _changedProperties: Map<PropertyKey, unknown> | PropertyValueMap<any>

        Map of changed properties with old values

      Returns void

    • Override point for the updateComplete promise.

      It is not safe to override the updateComplete getter directly due to a limitation in TypeScript which means it is not possible to call a superclass getter (e.g. super.updateComplete.then(...)) when the target language is ES5 (https://github.com/microsoft/TypeScript/issues/338). This method should be overridden instead. For example:

      class MyElement extends LitElement {
        override async getUpdateComplete() {
          const result = await super.getUpdateComplete();
          await this._myChild.updateComplete;
          return result;
        }
      }

      Returns Promise<boolean>

      A promise of a boolean that resolves to true if the update completed without triggering another update.

    • Performs an element update. Note, if an exception is thrown during the update, firstUpdated and updated will not be called.

      Call performUpdate() to immediately process a pending update. This should generally not be needed, but it can be done in rare cases when you need to update synchronously.

      Returns void

    • Requests an update which is processed asynchronously. This should be called when an element should update based on some state not triggered by setting a reactive property. In this case, pass no arguments. It should also be called when manually implementing a property setter. In this case, pass the property name and oldValue to ensure that any configured property options are honored.

      Parameters

      • Optionalname: PropertyKey

        name of requesting property

      • OptionaloldValue: unknown

        old value of requesting property

      • Optionaloptions: PropertyDeclaration<unknown, unknown>

        property options to use instead of the previously configured options

      Returns void

    • Schedules an element update. You can override this method to change the timing of updates by returning a Promise. The update will await the returned Promise, and you should resolve the Promise to allow the update to proceed. If this method is overridden, super.scheduleUpdate() must be called.

      For instance, to schedule updates to occur just before the next frame:

      override protected async scheduleUpdate(): Promise<unknown> {
        await new Promise((resolve) => requestAnimationFrame(() => resolve()));
        super.scheduleUpdate();
      }

      Returns void | Promise<unknown>

    • Controls whether or not update() should be called when the element requests an update. By default, this method always returns true, but this can be customized to control when to update.

      Parameters

      • _changedProperties: Map<PropertyKey, unknown> | PropertyValueMap<any>

        Map of changed properties with old values

      Returns boolean

    • 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.

      Parameters

      • changedProperties: Map<PropertyKey, unknown> | PropertyValueMap<any>

        Map of changed properties with old values

      Returns void

    • Invoked whenever the element is updated. Implement to perform post-updating tasks via DOM APIs, for example, focusing an element.

      Setting properties inside this method will trigger the element to update again after this update cycle completes.

      Parameters

      • _changedProperties: Map<PropertyKey, unknown> | PropertyValueMap<any>

        Map of changed properties with old values

      Returns void

    • Invoked before update() to compute values needed during the update.

      Implement willUpdate to compute property values that depend on other properties and are used in the rest of the update process.

      willUpdate(changedProperties) {
        // only need to check changed properties for an expensive computation.
        if (changedProperties.has('firstName') || changedProperties.has('lastName')) {
          this.sha = computeSHA(`${this.firstName} ${this.lastName}`);
        }
      }

      render() {
        return html`SHA: ${this.sha}`;
      }

      Parameters

      • _changedProperties: Map<PropertyKey, unknown> | PropertyValueMap<any>

      Returns void

    Settings

    Member Visibility

    On This Page

    Other
    constructor_downloadingRefaccessKeyaccessKeyLabelariaAtomicariaAutoCompleteariaBrailleLabelariaBrailleRoleDescriptionariaBusyariaCheckedariaColCountariaColIndexariaColIndexTextariaColSpanariaCurrentariaDescriptionariaDisabledariaExpandedariaHasPopupariaHiddenariaInvalidariaKeyShortcutsariaLabelariaLevelariaLiveariaModalariaMultiLineariaMultiSelectableariaOrientationariaPlaceholderariaPosInSetariaPressedariaReadOnlyariaRelevantariaRequiredariaRoleDescriptionariaRowCountariaRowIndexariaRowIndexTextariaRowSpanariaSelectedariaSetSizeariaSortariaValueMaxariaValueMinariaValueNowariaValueTextassignedSlotATTRIBUTE_NODEattributesattributeStyleMapautocapitalizeautofocusbaseURIcancelPromiseControllerCDATA_SECTION_NODEchildElementCountchildNodeschildrenclassNameclientHeightclientLeftclientTopclientWidthCOMMENT_NODEcontentEditablecurrentCSSZoomdatasetdirDOCUMENT_FRAGMENT_NODEDOCUMENT_NODEDOCUMENT_POSITION_CONTAINED_BYDOCUMENT_POSITION_CONTAINSDOCUMENT_POSITION_DISCONNECTEDDOCUMENT_POSITION_FOLLOWINGDOCUMENT_POSITION_IMPLEMENTATION_SPECIFICDOCUMENT_POSITION_PRECEDINGDOCUMENT_TYPE_NODEdomContentLoadedControllerdownloadFunctiondraggableELEMENT_NODEenterKeyHintENTITY_NODEENTITY_REFERENCE_NODEfirstChildfirstElementChildhiddenidinertinnerHTMLinnerTextinputModeisConnectedisContentEditablelanglastChildlastElementChildlocalNamenamespaceURInextElementSiblingnextSiblingnodeNamenodeTypenodeValuenonceNOTATION_NODEoffsetHeightoffsetLeftoffsetParentoffsetTopoffsetWidthonabortonanimationcancelonanimationendonanimationiterationonanimationstartonauxclickonbeforeinputonbeforetoggleonbluroncanceloncanplayoncanplaythroughonchangeonclickoncloseoncontextlostoncontextmenuoncontextrestoredoncopyoncuechangeoncutondblclickondragondragendondragenterondragleaveondragoverondragstartondropondurationchangeonemptiedonendedonerroronfocusonformdataonfullscreenchangeonfullscreenerrorongotpointercaptureoninputoninvalidonkeydownonkeypressonkeyuponloadonloadeddataonloadedmetadataonloadstartonlostpointercaptureonmousedownonmouseenteronmouseleaveonmousemoveonmouseoutonmouseoveronmouseuponpasteonpauseonplayonplayingonpointercancelonpointerdownonpointerenteronpointerleaveonpointermoveonpointeroutonpointeroveronpointeruponprogressonratechangeonresetonresizeonscrollonscrollendonsecuritypolicyviolationonseekedonseekingonselectonselectionchangeonselectstartonslotchangeonstalledonsubmitonsuspendontimeupdateontoggleontouchcancelontouchendontouchmoveontouchstartontransitioncancelontransitionendontransitionrunontransitionstartonvolumechangeonwaitingonwebkitanimationendonwebkitanimationiterationonwebkitanimationstartonwebkittransitionendonwheelouterHTMLouterTextownerDocumentparentElementparentNodepopoverprefixpreviousElementSiblingpreviousSiblingPROCESSING_INSTRUCTION_NODEqueryStringControllerqueryStringReflectionrequiredQueryStringParamsresultAttributesrolescrollHeightscrollLeftscrollTopscrollWidthsearchFunctionsearchResultsshadowRootslotspellchecktabIndextableColumnClassestableHeadertagNameTEXT_NODEtextContenttitletitleExampletranslatewritingSuggestions_$litElement$_initializers[metadata]finalizedclassListpartstyleaddEventListenerafteranimateappendappendChildattachInternalsattachShadowbeforeblurcheckVisibilityclickcloneNodeclosestcompareDocumentPositioncomputedStyleMapcontainsdispatchEventfocusformToObjectgetAnimationsgetAttributegetAttributeNamesgetAttributeNodegetAttributeNodeNSgetAttributeNSgetBoundingClientRectgetClientRectsgetElementsByClassNamegetElementsByTagNamegetElementsByTagNameNSgetHTMLgetRootNodehasAttributehasAttributeNShasAttributeshasChildNodeshasPointerCapturehidePopoverinsertAdjacentElementinsertAdjacentHTMLinsertAdjacentTextinsertBeforeisDefaultNamespaceisEqualNodeisSameNodelookupNamespaceURIlookupPrefixmatchesnormalizeprependquerySelectorquerySelectorAllreleasePointerCaptureremoveremoveAttributeremoveAttributeNoderemoveAttributeNSremoveChildremoveEventListenerrenderResultsrenderResultsInforeplaceChildreplaceChildrenreplaceWithrequestFullscreenrequestPointerLockscrollscrollByscrollIntoViewscrollTosetAttributesetAttributeNodesetAttributeNodeNSsetAttributeNSsetHTMLUnsafesetPointerCaptureshowPopoversubmittoggleAttributetogglePopovervalueOrQuerystringParameterwebkitMatchesSelectoraddInitializerfinalize
    attributes
    controllers
    dev-mode
    lifecycle
    properties
    rendering
    styles
    updates