LightningElement Class Properties

LightningElement is the base class for Lightning web components. Properties that are specific to LightningElement include:

  • constructor: The constructor for the LightningElement class.
  • hostElement: Accesses the HTMLElement of the Lightning web component in shadow DOM and light DOM. See Access the Parent Element.
  • Template Access
    • template: The template for the Lightning web component. In light DOM components, use this instead of this.template to access the template as there's no shadow root.
    • refs: Accesses DOM elements in a specified template.
  • Lifecycle Callbacks
    • connectedCallback
    • disconnectedCallback
    • render
    • renderedCallback
    • errorCallback

LightningElement is a wrapper of the standard HTMLElement interface. A custom Lightning web component, which extends LightningElement, inherits properties and methods from HTMLElement.

The inherited properties and methods are:

  • accessKey
  • addEventListener
  • attachInternals
  • children
  • childNodes
  • classList
  • dir
  • dispatchEvent
  • draggable
  • firstChild
  • firstElementChild
  • getAttribute
  • getAttributeNS
  • getBoundingClientRect
  • getElementsByClassName
  • getElementsByTagName
  • hasAttribute
  • hasAttributeNS
  • hidden
  • id
  • isConnected
  • lang
  • lastChild
  • lastElementChild
  • ownerDocument
  • querySelector
  • querySelectorAll
  • removeAttribute
  • removeAttributeNS
  • removeEventListener
  • setAttribute
  • setAttributeNS
  • shadowRoot
  • spellcheck
  • style (LWC API v62.0 and later)
  • tabIndex
  • tagName
  • template
  • title

LWC also reflects aria properties to support accessibility.

See Also