A component to display a Nanopublication.

Hierarchy

  • LitElement
    • NanopubDisplay

Constructors

Properties - Other

ATTRIBUTE_NODE CDATA_SECTION_NODE COMMENT_NODE 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 ELEMENT_NODE ENTITY_NODE ENTITY_REFERENCE_NODE NOTATION_NODE PROCESSING_INSTRUCTION_NODE TEXT_NODE accessKey accessKeyLabel ariaAtomic ariaAutoComplete ariaBusy ariaChecked ariaColCount ariaColIndex ariaColIndexText ariaColSpan ariaCurrent ariaDisabled ariaExpanded ariaHasPopup ariaHidden ariaInvalid ariaKeyShortcuts ariaLabel ariaLevel ariaLive ariaModal ariaMultiLine ariaMultiSelectable ariaOrientation ariaPlaceholder ariaPosInSet ariaPressed ariaReadOnly ariaRequired ariaRoleDescription ariaRowCount ariaRowIndex ariaRowIndexText ariaRowSpan ariaSelected ariaSetSize ariaSort ariaValueMax ariaValueMin ariaValueNow ariaValueText assignedSlot attributes autocapitalize autofocus baseURI childElementCount childNodes children classList className clientHeight clientLeft clientTop clientWidth contentEditable dataset dir disableDisplayButton disableDisplayStatus displayAssertion displayHead displayPrefixes displayProvenance displayPubinfo draggable enterKeyHint error? firstChild firstElementChild hidden hideAssertion hideProvenance hidePubinfo html_rdf? id inert innerHTML innerText inputMode isConnected isContentEditable lang lastChild lastElementChild localName namespaceURI nextElementSibling nextSibling nodeName nodeType nodeValue nonce? offsetHeight offsetLeft offsetParent offsetTop offsetWidth onabort onanimationcancel onanimationend onanimationiteration onanimationstart onauxclick onbeforeinput onblur oncancel oncanplay oncanplaythrough onchange onclick onclose oncontextmenu 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 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 part prefix prefixes? previousElementSibling previousSibling rdf role scrollHeight scrollLeft scrollTop scrollWidth shadowRoot showDisplayOptions slot spellcheck style tabIndex tagName textContent title translate url _$litElement$ _initializers? finalized styles

Properties - dev-mode

Properties - properties

Properties - rendering

Properties - styles

Properties - updates

Accessors - attributes

Accessors - updates

Methods - Other

Methods - attributes

Methods - controllers

Methods - lifecycle

Methods - properties

Methods - rendering

Methods - styles

Methods - updates

Constructors

  • Returns NanopubDisplay

Other Properties

ATTRIBUTE_NODE: number
CDATA_SECTION_NODE: number

node is a CDATASection node.

COMMENT_NODE: number

node is a Comment node.

DOCUMENT_FRAGMENT_NODE: number

node is a DocumentFragment node.

DOCUMENT_NODE: number

node is a document.

DOCUMENT_POSITION_CONTAINED_BY: number

Set when other is a descendant of node.

DOCUMENT_POSITION_CONTAINS: number

Set when other is an ancestor of node.

DOCUMENT_POSITION_DISCONNECTED: number

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

DOCUMENT_POSITION_FOLLOWING: number

Set when other is following node.

DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: number
DOCUMENT_POSITION_PRECEDING: number

Set when other is preceding node.

DOCUMENT_TYPE_NODE: number

node is a doctype.

ELEMENT_NODE: number

node is an element.

ENTITY_NODE: number
ENTITY_REFERENCE_NODE: number
NOTATION_NODE: number
PROCESSING_INSTRUCTION_NODE: number

node is a ProcessingInstruction node.

TEXT_NODE: number

node is a Text node.

accessKey: string
accessKeyLabel: string
ariaAtomic: null | string
ariaAutoComplete: null | string
ariaBusy: null | string
ariaChecked: null | string
ariaColCount: null | string
ariaColIndex: null | string
ariaColIndexText: null | string
ariaColSpan: null | string
ariaCurrent: null | string
ariaDisabled: null | string
ariaExpanded: null | string
ariaHasPopup: null | string
ariaHidden: null | string
ariaInvalid: null | string
ariaKeyShortcuts: null | string
ariaLabel: null | string
ariaLevel: null | string
ariaLive: null | string
ariaModal: null | string
ariaMultiLine: null | string
ariaMultiSelectable: null | string
ariaOrientation: null | string
ariaPlaceholder: null | string
ariaPosInSet: null | string
ariaPressed: null | string
ariaReadOnly: null | string
ariaRequired: null | string
ariaRoleDescription: null | string
ariaRowCount: null | string
ariaRowIndex: null | string
ariaRowIndexText: null | string
ariaRowSpan: null | string
ariaSelected: null | string
ariaSetSize: null | string
ariaSort: null | string
ariaValueMax: null | string
ariaValueMin: null | string
ariaValueNow: null | string
ariaValueText: null | string
assignedSlot: null | HTMLSlotElement
attributes: NamedNodeMap
autocapitalize: string
autofocus: boolean
baseURI: string

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

childElementCount: number
childNodes: NodeListOf<ChildNode>

Returns the children.

children: HTMLCollection

Returns the child elements.

classList: DOMTokenList

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

className: string

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

clientHeight: number
clientLeft: number
clientTop: number
clientWidth: number
contentEditable: string
dataset: DOMStringMap
dir: string
disableDisplayButton: boolean = false

Disable the button to change which sections of the nanopub are displayed

disableDisplayStatus: boolean = false

Display the status icon (if up-to-date, retracted, or newers)

displayAssertion: boolean = true

Display the Assertion graph section, or not

displayHead: boolean = false

Display the Head graph section, or not

displayPrefixes: boolean = false

Display the prefixes section, or not

displayProvenance: boolean = true

Display the Provenance graph section, or not

displayPubinfo: boolean = true

Display the PubInfo graph section, or not

draggable: boolean
enterKeyHint: string
error?: string

Error message to show if there is a problem displaying the nanopub

firstChild: null | ChildNode

Returns the first child.

firstElementChild: null | Element

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

hidden: boolean
hideAssertion: boolean = false

Hide the Assertion graph by default

hideProvenance: boolean = false

Hide the Provenance graph by default

hidePubinfo: boolean = false

Hide the PubInfo graph by default

html_rdf?: any

The HTML generated from the RDF to display the nanopub

id: string

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

inert: boolean
innerHTML: string
innerText: string
inputMode: string
isConnected: boolean

Returns true if node is connected and false otherwise.

isContentEditable: boolean
lang: string
lastChild: null | ChildNode

Returns the last child.

lastElementChild: null | Element

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

localName: string

Returns the local name.

namespaceURI: null | string

Returns the namespace.

nextElementSibling: null | Element

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

nextSibling: null | ChildNode

Returns the next sibling.

nodeName: string

Returns a string appropriate for the type of node.

nodeType: number

Returns the type of node.

nodeValue: null | string
nonce?: string
offsetHeight: number
offsetLeft: number
offsetParent: null | Element
offsetTop: number
offsetWidth: number
onabort: null | ((this: GlobalEventHandlers, ev: UIEvent) => any)

Fires when the user aborts the download.

Param

The event.

onanimationcancel: null | ((this: GlobalEventHandlers, ev: AnimationEvent) => any)
onanimationend: null | ((this: GlobalEventHandlers, ev: AnimationEvent) => any)
onanimationiteration: null | ((this: GlobalEventHandlers, ev: AnimationEvent) => any)
onanimationstart: null | ((this: GlobalEventHandlers, ev: AnimationEvent) => any)
onauxclick: null | ((this: GlobalEventHandlers, ev: MouseEvent) => any)
onbeforeinput: null | ((this: GlobalEventHandlers, ev: InputEvent) => any)
onblur: null | ((this: GlobalEventHandlers, ev: FocusEvent) => any)

Fires when the object loses the input focus.

Param

The focus event.

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

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

Param

The event.

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

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

Param

The event.

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

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

Param

The mouse event.

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

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

Param

The mouse event.

oncopy: null | ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any)
oncuechange: null | ((this: GlobalEventHandlers, ev: Event) => any)
oncut: null | ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any)
ondblclick: null | ((this: GlobalEventHandlers, ev: MouseEvent) => any)

Fires when the user double-clicks the object.

Param

The mouse event.

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

Fires on the source object continuously during a drag operation.

Param

The event.

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.

Param

The event.

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

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

Param

The drag event.

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.

Param

The drag event.

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

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

Param

The event.

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

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

Param

The event.

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

Occurs when the duration attribute is updated.

Param

The event.

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

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

Param

The event.

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

Occurs when the end of playback is reached.

Param

The event

onerror: OnErrorEventHandler

Fires when an error occurs during object loading.

Param

The event.

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

Fires when the object receives focus.

Param

The event.

onformdata: null | ((this: GlobalEventHandlers, ev: FormDataEvent) => any)
onfullscreenchange: null | ((this: Element, ev: Event) => any)
onfullscreenerror: null | ((this: Element, ev: Event) => any)
ongotpointercapture: null | ((this: GlobalEventHandlers, ev: PointerEvent) => any)
oninput: null | ((this: GlobalEventHandlers, ev: Event) => any)
oninvalid: null | ((this: GlobalEventHandlers, ev: Event) => any)
onkeydown: null | ((this: GlobalEventHandlers, ev: KeyboardEvent) => any)

Fires when the user presses a key.

Param

The keyboard event

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

Fires when the user presses an alphanumeric key.

Param

The event.

Deprecated

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

Fires when the user releases a key.

Param

The keyboard event

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

Fires immediately after the browser loads the object.

Param

The event.

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

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

Param

The event.

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

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

Param

The event.

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

Occurs when Internet Explorer begins looking for media data.

Param

The event.

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

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

Param

The mouse event.

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

Fires when the user moves the mouse over the object.

Param

The mouse event.

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

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

Param

The mouse event.

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

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

Param

The mouse event.

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

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

Param

The mouse event.

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

Occurs when playback is paused.

Param

The event.

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

Occurs when the play method is requested.

Param

The event.

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

Occurs when the audio or video has started playing.

Param

The event.

onpointercancel: null | ((this: GlobalEventHandlers, ev: PointerEvent) => any)
onpointerdown: null | ((this: GlobalEventHandlers, ev: PointerEvent) => any)
onpointerenter: null | ((this: GlobalEventHandlers, ev: PointerEvent) => any)
onpointerleave: null | ((this: GlobalEventHandlers, ev: PointerEvent) => any)
onpointermove: null | ((this: GlobalEventHandlers, ev: PointerEvent) => any)
onpointerout: null | ((this: GlobalEventHandlers, ev: PointerEvent) => any)
onpointerover: null | ((this: GlobalEventHandlers, ev: PointerEvent) => any)
onpointerup: null | ((this: GlobalEventHandlers, ev: PointerEvent) => any)
onprogress: null | ((this: GlobalEventHandlers, ev: ProgressEvent<EventTarget>) => any)

Occurs to indicate progress while downloading media data.

Param

The event.

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

Occurs when the playback rate is increased or decreased.

Param

The event.

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

Fires when the user resets a form.

Param

The event.

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

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

Param

The event.

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

Occurs when the seek operation ends.

Param

The event.

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

Occurs when the current playback position is moved.

Param

The event.

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

Fires when the current selection changes.

Param

The event.

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

Occurs when the download has stopped.

Param

The event.

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

Occurs if the load operation has been intentionally halted.

Param

The event.

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

Occurs to indicate the current playback position.

Param

The event.

ontoggle: null | ((this: GlobalEventHandlers, ev: Event) => any)
ontouchcancel?: null | ((this: GlobalEventHandlers, ev: TouchEvent) => any)
ontouchend?: null | ((this: GlobalEventHandlers, ev: TouchEvent) => any)
ontouchmove?: null | ((this: GlobalEventHandlers, ev: TouchEvent) => any)
ontouchstart?: null | ((this: GlobalEventHandlers, ev: TouchEvent) => any)
ontransitioncancel: null | ((this: GlobalEventHandlers, ev: TransitionEvent) => any)
ontransitionend: null | ((this: GlobalEventHandlers, ev: TransitionEvent) => any)
ontransitionrun: null | ((this: GlobalEventHandlers, ev: TransitionEvent) => any)
ontransitionstart: null | ((this: GlobalEventHandlers, ev: TransitionEvent) => any)
onvolumechange: null | ((this: GlobalEventHandlers, ev: Event) => any)

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

Param

The event.

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

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

Param

The event.

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

Deprecated

This is a legacy alias of onanimationend.

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

Deprecated

This is a legacy alias of onanimationiteration.

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

Deprecated

This is a legacy alias of onanimationstart.

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

Deprecated

This is a legacy alias of ontransitionend.

onwheel: null | ((this: GlobalEventHandlers, ev: WheelEvent) => any)
outerHTML: string
outerText: string
ownerDocument: Document
parentElement: null | HTMLElement

Returns the parent element.

parentNode: null | ParentNode

Returns the parent.

part: DOMTokenList
prefix: null | string

Returns the namespace prefix.

prefixes?: any

A dictionary with the prefixes and namespaces used in the nanopub

previousElementSibling: null | Element

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

previousSibling: null | ChildNode

Returns the previous sibling.

rdf: string = ''

The RDF string of the nanopublication to display. Will be downloaded from URL if not provided.

role: null | string
scrollHeight: number
scrollLeft: number
scrollTop: number
scrollWidth: number
shadowRoot: null | ShadowRoot

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

showDisplayOptions: boolean = false

Boolean to know if the window to change which sections of the nanopub are displayed is opened

slot: string

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

spellcheck: boolean
style: CSSStyleDeclaration
tabIndex: number
tagName: string

Returns the HTML-uppercased qualified name.

textContent: null | string
title: string
translate: boolean
url: string = ''

The URL of the nanopublication to display

_$litElement$: boolean
_initializers?: Initializer[]
finalized: boolean

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 @lit/reactive-element for more information.

styles: CSSResult = ...

dev-mode Properties

disableWarning?: ((warningKind: WarningKind) => void)

Type declaration

    • (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');

      Nocollapse

      Parameters

      • warningKind: WarningKind

      Returns void

enableWarning?: ((warningKind: WarningKind) => void)

Type declaration

    • (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');

      Nocollapse

      Parameters

      • warningKind: WarningKind

      Returns void

enabledWarnings?: WarningKind[]

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

This property is only used in development builds.

Nocollapse

properties Properties

elementProperties: PropertyDeclarationMap

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

Nocollapse

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.

Nocollapse

rendering Properties

renderOptions: RenderOptions
renderRoot: HTMLElement | ShadowRoot

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.

Nocollapse

styles Properties

elementStyles: CSSResultOrNative[]

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

Nocollapse

updates Properties

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.

attributes Accessors

  • get observedAttributes(): string[]
  • Returns a list of attributes corresponding to the registered properties.

    Nocollapse

    Returns string[]

updates Accessors

  • 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

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

    Returns Promise<boolean>

Other Methods

  • Type Parameters

    • K extends keyof HTMLElementEventMap

    Parameters

    • type: K
    • listener: ((this: HTMLElement, ev: HTMLElementEventMap[K]) => any)
        • (this: HTMLElement, ev: HTMLElementEventMap[K]): any
        • Parameters

          • this: HTMLElement
          • ev: HTMLElementEventMap[K]

          Returns any

    • Optional options: boolean | AddEventListenerOptions

    Returns void

  • Parameters

    • type: string
    • listener: EventListenerOrEventListenerObject
    • Optional options: 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.

    Parameters

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

    Returns void

  • Parameters

    • keyframes: null | Keyframe[] | PropertyIndexedKeyframes
    • Optional options: 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.

    Parameters

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

    Returns void

  • Type Parameters

    • T extends Node<T>

    Parameters

    • node: T

    Returns T

  • Returns ElementInternals

  • Creates a shadow root for element and returns it.

    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.

    Parameters

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

    Returns void

  • Returns void

  • Returns void

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

    Parameters

    • Optional deep: boolean

    Returns Node

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

    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

    • E extends Element<E> = Element

    Parameters

    • selectors: string

    Returns null | E

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

    Parameters

    • other: Node

    Returns number

  • Fetch the Nanopub if needed, parse the RDF TRiG using n3.js, and generate the HTML to represent the nanopub

    Returns Promise<void>

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

    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.

    Parameters

    • event: Event

    Returns boolean

  • Parameters

    • Optional options: FocusOptions

    Returns void

  • Parameters

    • Optional options: GetAnimationsOptions

    Returns Animation[]

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

    Parameters

    • qualifiedName: string

    Returns null | string

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

    Parameters

    • namespace: null | string
    • localName: string

    Returns null | string

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

    Returns string[]

  • Parameters

    • qualifiedName: string

    Returns null | Attr

  • Parameters

    • namespace: null | string
    • localName: string

    Returns null | Attr

  • Returns DOMRect

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

    Parameters

    • classNames: string

    Returns HTMLCollectionOf<Element>

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

  • Parameters

    • qualifiedName: string

    Returns HTMLCollectionOf<Element>

  • 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

    • namespace: null | string
    • localName: string

    Returns HTMLCollectionOf<Element>

  • Returns node's root.

    Parameters

    • Optional options: GetRootNodeOptions

    Returns Node

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

    Parameters

    • qualifiedName: string

    Returns boolean

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

    Parameters

    • namespace: null | string
    • localName: string

    Returns boolean

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

    Returns boolean

  • Returns whether node has children.

    Returns boolean

  • Parameters

    • pointerId: number

    Returns boolean

  • Parameters

    • where: InsertPosition
    • element: Element

    Returns null | Element

  • Parameters

    • position: InsertPosition
    • text: string

    Returns void

  • Parameters

    • where: InsertPosition
    • data: string

    Returns void

  • Type Parameters

    • T extends Node<T>

    Parameters

    • node: T
    • child: null | Node

    Returns T

  • Parameters

    • namespace: null | string

    Returns boolean

  • Returns whether node and otherNode have the same properties.

    Parameters

    • otherNode: null | Node

    Returns boolean

  • Parameters

    • otherNode: null | Node

    Returns boolean

  • Parameters

    • prefix: null | string

    Returns null | string

  • Parameters

    • namespace: null | string

    Returns null | string

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

    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.

    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.

    Parameters

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

    Returns void

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

    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

    • E extends Element<E> = Element

    Parameters

    • selectors: string

    Returns null | E

  • Returns all element descendants of node that match selectors.

    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

    • E extends Element<E> = Element

    Parameters

    • selectors: string

    Returns NodeListOf<E>

  • Parameters

    • pointerId: number

    Returns void

  • Removes node.

    Returns void

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

    Parameters

    • qualifiedName: string

    Returns void

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

    Parameters

    • namespace: null | string
    • localName: string

    Returns void

  • Parameters

    • attr: Attr

    Returns Attr

  • Type Parameters

    • T extends Node<T>

    Parameters

    • child: T

    Returns T

  • Type Parameters

    • K extends keyof HTMLElementEventMap

    Parameters

    • type: K
    • listener: ((this: HTMLElement, ev: HTMLElementEventMap[K]) => any)
        • (this: HTMLElement, ev: HTMLElementEventMap[K]): any
        • Parameters

          • this: HTMLElement
          • ev: HTMLElementEventMap[K]

          Returns any

    • Optional options: boolean | EventListenerOptions

    Returns void

  • Parameters

    • type: string
    • listener: EventListenerOrEventListenerObject
    • Optional options: boolean | EventListenerOptions

    Returns void

  • Type Parameters

    • T extends Node<T>

    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.

    Parameters

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

    Parameters

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

    Parameters

    • Optional options: FullscreenOptions

    Returns Promise<void>

  • Returns void

  • Parameters

    • Optional options: ScrollToOptions

    Returns void

  • Parameters

    • x: number
    • y: number

    Returns void

  • Parameters

    • Optional options: ScrollToOptions

    Returns void

  • Parameters

    • x: number
    • y: number

    Returns void

  • Parameters

    • Optional arg: boolean | ScrollIntoViewOptions

    Returns void

  • Parameters

    • Optional options: 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.

    Parameters

    • qualifiedName: string
    • value: string

    Returns void

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

    Parameters

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

    Returns void

  • Parameters

    • attr: Attr

    Returns null | Attr

  • Parameters

    • attr: Attr

    Returns null | Attr

  • Parameters

    • pointerId: number

    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.

    Parameters

    • qualifiedName: string
    • Optional force: boolean

    Returns boolean

  • Deprecated

    This is a legacy alias of matches.

    Parameters

    • selectors: string

    Returns boolean

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

    Nocollapse

    Parameters

    • initializer: Initializer

    Returns void

  • Creates property accessors for registered properties, sets up element styling, and ensures any superclasses are also finalized. Returns true if the element was finalized.

    Nocollapse

    Returns boolean

attributes Methods

  • 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 using the lifecycle callbacks on MDN for more information about the attributeChangedCallback.

    Parameters

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

    Returns void

controllers Methods

  • 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

lifecycle Methods

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

  • 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);
    }

    Nocollapse

    Parameters

    • name: PropertyKey
    • Optional options: 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
    }
    }
    }

    Nocollapse

    Parameters

    • name: PropertyKey
    • key: string | symbol
    • options: PropertyDeclaration<unknown, unknown>

    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.

    Nocollapse

    Final

    Parameters

    • name: PropertyKey

    Returns PropertyDeclaration<unknown, unknown>

rendering Methods

  • Returns Element | ShadowRoot

styles Methods

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

    Nocollapse

    Parameters

    • Optional styles: CSSResultGroup

    Returns CSSResultOrNative[]

updates Methods

  • 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: PropertyValueMap<any> | Map<PropertyKey, unknown>

      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

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

    Returns Promise<boolean>

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

    Note: To ensure performUpdate() synchronously completes a pending update, it should not be overridden. In LitElement 2.x it was suggested to override performUpdate() to also customizing update scheduling. Instead, you should now override scheduleUpdate(). For backwards compatibility with LitElement 2.x, scheduling updates via performUpdate() continues to work, but will make also calling performUpdate() to synchronously process updates difficult.

    Returns void | Promise<unknown>

  • 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

    • Optional name: PropertyKey

      name of requesting property

    • Optional oldValue: unknown

      old value of requesting property

    • Optional options: 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: PropertyValueMap<any> | Map<PropertyKey, unknown>

      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: PropertyValueMap<any> | Map<PropertyKey, unknown>

      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: PropertyValueMap<any> | Map<PropertyKey, unknown>

      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: PropertyValueMap<any> | Map<PropertyKey, unknown>

    Returns void

Generated using TypeDoc