window.HTMLDialogElement

See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement

open : `boolean`

Read only

isMinimized : `boolean`

Read only

returnValue : `*`

REJECTION_REASON_NOT_ALLOWED

When the promise returned from openDialog() is rejected, error.code can be equal to this value, which means that the application does not allow showing dialogs (e.g. only one dialog is allowed).

REJECTION_REASON_DETACHED

When the promise returned from openDialog() is rejected, error.code can be equal to this value, which means that the node has been detached from DOM tree.

dataset

Access to all the custom data attributes (data-*) set.

See: HTMLElement - dataset

innerText : `string`

lang : `string`

Base language of an element's attribute values and text content.

See: HTMLElement - lang

dir : `string`

The text writing directionality of the content of the current element limited to only known values.

See: HTMLElement - dir
Since: v7.1

hidden : `boolean` | `string`

Indicates the browser should not render the contents of the element. Note: "until-found" is not supported.

See: HTMLElement - hidden, Spec - hidden attribute

nodeName : `string`

Read only

localName : `string`

Read only A string representing the local part of the qualified name of the element

See: https://developer.mozilla.org/en-US/docs/Web/API/Element/localName

tagName : `string`

Read only A string indicating the element's tag name

See: https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName

nodeType : `number`

Read only

namespaceURI : `string`

Read only Returns the namespace URI of the element, or null if the element is not in a namespace.

See: https://developer.mozilla.org/en-US/docs/Web/API/Element/namespaceURI

id : `string`

Returns the property of the Element interface represents the element's identifier, reflecting the id global attribute.

See: https://developer.mozilla.org/en-US/docs/Web/API/Element/id

tabIndex : `number`

className : `string`

attributes : `NamedNodeMap`

Read only

style : `Style`

Read only

clientLeft : `number`

Read only

clientTop : `number`

Read only

clientWidth : `number`

Read only

clientHeight : `number`

Read only

offsetParent : `Element`

Read only

offsetLeft : `number`

Read only

offsetTop : `number`

Read only

offsetWidth : `number`

Read only

offsetHeight : `number`

Read only

scrollLeft : `number`

scrollTop : `number`

scrollWidth : `number`

Read only

scrollHeight : `number`

Read only

autofocus : `boolean`

Indicates if the element will focus automatically when it is loaded

uxpContainer : `number`

Read only

shadowRoot : `ShadowRoot`

Read only [ This feature is behind a feature flag. You must turn on enableSWCSupport in the featureFlags section of plugin manifest to use the same ]

Returns the open shadow root that is hosted by the element, or null if no open shadow root is present.

See: Element - shadowRoot

disabled : `boolean`

innerHTML

Read only

outerHTML : `string`

slot : `string`

[ This feature is behind a feature flag. You must turn on enableSWCSupport in the featureFlags section of plugin manifest to use the same ]

See: Element - slot

assignedSlot : `HTMLSlotElement`

Read only [ This feature is behind a feature flag. You must turn on enableSWCSupport in the featureFlags section of plugin manifest to use the same ]

See: Element - assignedSlot

contentEditable

Read only

isConnected : `boolean`

Read only

parentNode : `Node`

Read only

parentElement : `Element`

Read only

firstChild : `Node`

Read only

lastChild : `Node`

Read only

previousSibling : `Node`

Read only

nextSibling : `Node`

Read only

firstElementChild : `Node`

Read only

lastElementChild : `Node`

Read only

previousElementSibling : `Node`

Read only

nextElementSibling : `Node`

Read only

textContent : `string`

childNodes : `NodeList`

Read only

children : `HTMLCollection`

Read only

ownerDocument

Read only

show([options])

Show the non modal dialog.

Param	Type	Default	Description
[options]	`object`	`{}`	Options for the show.
[options.anchorOffset]	`object`		Offset from the anchor for the initial positioning of the dialog.
[options.anchorOffset.top]	`number`		Top offset from the anchor for the initial positioning of the dialog.
[options.anchorOffset.left]	`number`		Left offset from the anchor for the initial positioning of the dialog.

showModal()

Show the modal dialog.

Returns: Promise - A promise that resolves when the dialog is closed (NSC) after calling the close() method or clicking the "submit" button. The promise will be resolved with returnValue as a parameter. The promise can be rejected if the dialog was closed for other reasons e.g. the user hit escape or closed the window, or if the application does not allow showing the dialog. The error parameter will give more details. error.code will be one of the values from HTMLDialogElement.rejectionReasons.

close([returnValue])

Closes the dialog; setting the return value (optional)

Param	Type
[returnValue]	`*`

scrollTo(xOrOptions, y)

Scrolls the element to the new x and y positions. If options object is used with behavior: "smooth" then the element is smoothly scrolled.

See: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo

Param	Type	Description
xOrOptions	`*`	either the new scrollLeft position or an options object.
y	`*`	the optional new scrollTop position.

scrollIntoView(alignToTop)

Param	Type
alignToTop	`boolean`

scrollIntoViewIfNeeded()

attachShadow(init)

[ This feature is behind a feature flag. You must turn on enableSWCSupport in the featureFlags section of plugin manifest to use the same ]

Attaches a shadow DOM tree to the specified element and returns a reference to its ShadowRoot.

Returns: ShadowRoot
See: Element - attachShadow

Param	Description
init	An object which contains the fields : mode(open/closed) , delegatesFocus ,slotAssignment

focus()

blur()

getAttribute(name)

Returns: string
See: https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute

Param	Type	Description
name	`string`	Name of the attribute whose value you want to get.

setAttribute(name, value)

See: https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute

Param	Type	Description
name	`string`	Name of the attribute whose value is to be set
value	`string`	Value to assign to the attribute

removeAttribute(name)

See: https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute

Param	Type
name	`string`

hasAttribute(name)

Returns: boolean
See: https://developer.mozilla.org/en-US/docs/Web/API/Element/hasAttribute

Param	Type
name	`string`

hasAttributes()

Returns a boolean value indicating whether the current element has any attributes or not.

Returns: boolean
See: https://developer.mozilla.org/en-US/docs/Web/API/Element/hasAttributes

getAttributeNames()

Returns the attribute names of the element as an Array of strings

Returns: Array
See: https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttributeNames

getAttributeNode(name)

Returns: *
See: https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttributeNode

Param	Type
name	`string`

setAttributeNode(newAttr)

See: https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttributeNode

Param	Type
newAttr	`*`

removeAttributeNode(oldAttr)

Param	Type
oldAttr	`*`

click()

getElementsByClassName(name)

Returns: NodeList

Param	Type
name	`string`

getElementsByTagName(name)

Returns: NodeList

Param	Type
name	`string`

querySelector(selector)

Returns: Element

Param	Type
selector	`string`

querySelectorAll(selector)

Returns: NodeList

Param	Type
selector	`string`

setPointerCapture(pointerId)

Sets pointer capture for the element. This implementation does not dispatch the gotpointercapture event on the element.

Throws:

DOMException If the element is not connected to the DOM.

See: Element - setPointerCapture
Since: v7.1

Param	Type	Description
pointerId	`number`	The unique identifier of the pointer to be captured.

Example

// HTML
<style>
    div {
        width: 140px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fbe;
        position: absolute;
    }
</style>
<div id="slider">SLIDE ME</div>

// JS
function beginSliding(e) {
     slider.setPointerCapture(e.pointerId);
     slider.addEventListener("pointermove", slide);
 }

 function stopSliding(e) {
     slider.releasePointerCapture(e.pointerId);
     slider.removeEventListener("pointermove", slide);
 }

 function slide(e) {
     slider.style.left = e.clientX;
 }

 const slider = document.getElementById("slider");

 slider.addEventListener("pointerdown", beginSliding);
 slider.addEventListener("pointerup", stopSliding);
Copied to your clipboard
1// HTML
2<style>
3    div {
4        width: 140px;
5        height: 50px;
6        display: flex;
7        align-items: center;
8        justify-content: center;
9        background: #fbe;
10        position: absolute;
11    }
12</style>
13<div id="slider">SLIDE ME</div>
14
15// JS
16function beginSliding(e) {
17     slider.setPointerCapture(e.pointerId);
18     slider.addEventListener("pointermove", slide);
19 }
20
21 function stopSliding(e) {
22     slider.releasePointerCapture(e.pointerId);
23     slider.removeEventListener("pointermove", slide);
24 }
25
26 function slide(e) {
27     slider.style.left = e.clientX;
28 }
29
30 const slider = document.getElementById("slider");
31
32 slider.addEventListener("pointerdown", beginSliding);
33 slider.addEventListener("pointerup", stopSliding);

releasePointerCapture(pointerId)

Releases pointer capture for the element. This implementation does not dispatch the lostpointercapture event on the element.

See: Element - releasePointerCapture
Since: v7.1

Param	Type	Description
pointerId	`number`	The unique identifier of the pointer to be released.

hasPointerCapture(pointerId)

Checks if the element has pointer capture for the specified pointer.

Returns: boolean - True if the element has pointer capture for the specified pointer, false otherwise.
See: Element - hasPointerCapture
Since: v7.1

Param	Type	Description
pointerId	`number`	The unique identifier of the pointer to check.

getBoundingClientRect()

Returns: *

closest(selectorString)

Returns: Element
See: https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

Param	Type
selectorString	`string`

matches(selectorString)

Returns: boolean
See: https://developer.mozilla.org/en-US/docs/Web/API/Element/matches

Param	Type
selectorString	`string`

insertAdjacentHTML(position, value)

Param	Type
position
value	`string`

insertAdjacentElement(position, node)

Returns: Node

Param	Type
position	`*`
node	`*`

insertAdjacentText(position, text)

Param	Type
position	`*`
text	`*`

hasChildNodes()

Returns: boolean

cloneNode(deep)

Returns: Node

Param	Type
deep	`boolean`

appendChild(child)

Returns: Node

Param	Type
child	`Node`

insertBefore(child, before)

Returns: Node

Param	Type
child	`Node`
before	`Node`

replaceChild(newChild, oldChild)

Returns: Node

Param	Type
newChild	`Node`
oldChild	`Node`

removeChild(child)

Returns: Node

Param	Type
child	`Node`

remove()

before(...nodes)

Param	Type
...nodes	`Array<Node>`

after(...nodes)

Param	Type
...nodes	`Array<Node>`

replaceWith(...nodes)

Param	Type
...nodes	`Array<Node>`

contains(node)

Param	Type
node	`Node`

getRootNode(options)

Returns: Node - root node

Param	Type
options	`Object`

addEventListener(eventName, callback, options)

See: EventTarget - addEventListener

Param	Type	Description
eventName	`*`
callback	`*`
options	`boolean` \| `Object`	Boolean value denoting capture value or options object. Currently supports only capture in options object ({ capture: bool_value }).

removeEventListener(eventName, callback, options)

See: EventTarget - removeEventListener

Param	Type	Description
eventName	`*`
callback	`*`
options	`boolean` \| `Object`	Boolean value denoting capture value or options object. Currently supports only capture in options object ({ capture: bool_value }).

dispatchEvent(event)

Param	Type
event	`*`

HTMLCanvasElement

HTMLElement

Was this helpful?

Yes

window.HTMLDialogElement

isMinimized : boolean

returnValue : *

REJECTION_REASON_NOT_ALLOWED

REJECTION_REASON_DETACHED

dataset

innerText : string

lang : string

dir : string

hidden : boolean | string

nodeName : string

localName : string

tagName : string

nodeType : number

namespaceURI : string

id : string

tabIndex : number

className : string

attributes : NamedNodeMap

style : Style

clientLeft : number

clientTop : number

clientWidth : number

clientHeight : number

offsetParent : Element

offsetLeft : number

offsetTop : number

offsetWidth : number

offsetHeight : number

scrollLeft : number

scrollTop : number

scrollWidth : number

scrollHeight : number

autofocus : boolean

uxpContainer : number

shadowRoot : ShadowRoot

disabled : boolean

innerHTML

outerHTML : string

slot : string

assignedSlot : HTMLSlotElement

contentEditable

isConnected : boolean

parentNode : Node

parentElement : Element

firstChild : Node

lastChild : Node

previousSibling : Node

nextSibling : Node

firstElementChild : Node

lastElementChild : Node

previousElementSibling : Node

nextElementSibling : Node

textContent : string

childNodes : NodeList

children : HTMLCollection

ownerDocument

show([options])

showModal()

close([returnValue])

scrollTo(xOrOptions, y)

scrollIntoView(alignToTop)

scrollIntoViewIfNeeded()

attachShadow(init)

focus()

blur()

getAttribute(name)

setAttribute(name, value)

removeAttribute(name)

hasAttribute(name)

hasAttributes()

getAttributeNames()

getAttributeNode(name)

setAttributeNode(newAttr)

removeAttributeNode(oldAttr)

click()

getElementsByClassName(name)

getElementsByTagName(name)

querySelector(selector)

querySelectorAll(selector)

isMinimized : `boolean`

returnValue : `*`

innerText : `string`

lang : `string`

dir : `string`

hidden : `boolean` | `string`

nodeName : `string`

localName : `string`

tagName : `string`

nodeType : `number`

namespaceURI : `string`

id : `string`

tabIndex : `number`

className : `string`

attributes : `NamedNodeMap`

style : `Style`

clientLeft : `number`

clientTop : `number`

clientWidth : `number`

clientHeight : `number`

offsetParent : `Element`

offsetLeft : `number`

offsetTop : `number`

offsetWidth : `number`

offsetHeight : `number`

scrollLeft : `number`

scrollTop : `number`

scrollWidth : `number`

scrollHeight : `number`

autofocus : `boolean`

uxpContainer : `number`

shadowRoot : `ShadowRoot`

disabled : `boolean`

outerHTML : `string`

slot : `string`

assignedSlot : `HTMLSlotElement`

isConnected : `boolean`

parentNode : `Node`

parentElement : `Element`

firstChild : `Node`

lastChild : `Node`

previousSibling : `Node`

nextSibling : `Node`

firstElementChild : `Node`

lastElementChild : `Node`

previousElementSibling : `Node`

nextElementSibling : `Node`

textContent : `string`

childNodes : `NodeList`

children : `HTMLCollection`