onchangeonclickoncloseoncommandoncontextlostoncontextmenuoncontextrestoredcommandcommandfordisabledformformactionConstraint validation: If the type
attribute is in the Reset Button state or the
Button state, the element is barred from
constraint validation.
If specified, the commandfor attribute value must be the ID of an element in the same tree as the button with the commandfor attribute.
The command
+ attribute is an enumerated attribute with the following keywords and states:
| Keyword + | State + | Brief description + |
|---|---|---|
toggle-popover
+ | Toggle popover + | Shows or hides the targeted popover element.
+ |
show-popover
+ | Show popover + | Shows the targeted popover element.
+ |
hide-popover
+ | Hide popover + | Hides the targeted popover element.
+ |
close
+ | Close + | Closes the targeted dialog element.
+ |
show-modal
+ | Show modal + | Opens the targeted dialog element as modal.
+ |
The attribute's missing value default and invalid value default are both the unknown state.
+ +A valid custom command is a string whose first two code points are the U+002D + HYPHEN-MINUS character.
+ +A button element element's activation behavior given
event is:
If element's node document is not fully active, then return.
If element has a form owner and element's commandfor or command attributes are present,
+ and the element's type attribute is not in
+ the button state, then return.
If element has a form owner then switch on element's type attribute's state, then:
Run the popover target attribute activation behavior given element and event's target.
Let invokee be the result of running element's get the commandfor associated
+ element.
If invokee is not null, then:
+ +If element has a form owner and element's type attribute is not in the button state, then return.
Let command be element's command attribute.
Let isCustom be true if the command attribute is in the + unknown state, and command's + value is a valid custom command, and false otherwise.
If the command attribute is in the unknown state and isCustom is false, + then return.
Let isPopover be true if invokee's popover attribute is not in the no popover state, and false otherwise.
If isPopover is false and isCustom is false, then:
+ +Assert: invokee's + namespace is the HTML namespace.
If this standard does not define is valid invoker command steps for + invokee's local name, then + return.
+ +Otherwise, if the result of running invokee's corresponding is valid + invoker command steps given command is not true, then return.
Let continue be the result of firing an
+ event named command at invokee, using
+ CommandEvent, with its command
+ attribute initialized to command's value, its source attribute initialized to element,
+ and its cancelable and composed attributes initialized to true.
If continue is false, then return.
If isCustom is true, then return.
Let shouldShowPopover be false.
Let shouldHidePopover be false.
If command is in the hidepopover state, then:
+ +If invokee's popover visibility state is showing, then set shouldHidePopover to + true.
Otherwise return.
If command is in the showpopover state, then:
+ +If invokee's popover visibility state is hidden, then set shouldShowPopover to + true.
Otherwise return.
If shouldShowPopover is true and the result of running + check popover validity given invokee, false, false, and null is true, + then:
+ +Assert: shouldHidePopover is false.
Assert: isPopover is true.
Run the show popover given invokee, false, and + element.
Otherwise, if shouldHidePopover is true and the result of running + check popover validity given invokee, true, false, and null is true, + then:
+ +Assert: shouldShowPopover is false.
Assert: isPopover is true.
Run the hide popover algorithm given invokee, true, true, and + false.
Otherwise, if this standard defines invoker command steps for + invokee's local name, then:
+ +Assert: shouldShowPopover is false and + shouldHidePopover is false.
Run the corresponding invoker command steps given invokee, + element and command.
Otherwise, run the popover target attribute activation behavior given + element.
An HTML element can have specific + is valid invoker command steps and invoker command steps defined for the + element's local name.
+The form attribute is used to explicitly associate the
button element with its form owner. The name attribute represents the element's name. The disabled attribute is used to make the control non-interactive and
- to prevent its value from being submitted. The formaction,
- formenctype, disabled attribute is used to make the control non-interactive
+ and to prevent its value from being submitted. The formaction, formenctype, formmethod, formnovalidate, and formtarget attributes are attributes for form
- submission.
The formnovalidate attribute can be
used to make submit buttons that do not trigger the constraint validation.
A button (and its value) is only included in the form submission if the button itself was used to initiate the form submission.
-The commandForElement IDL attribute must
+ reflect the content attribute of the same name.
The command IDL attribute must reflect the
+ content attribute of the same name.
The value
IDL attribute must reflect the content attribute of the same name.
The following buttons use commandfor to open and close a popover box when activated:
+<button type=button
+ commandfor="the-popover"
+ command="toggle-popover">
+ Show menu
+</button>
+<div popover
+ id="the-popover">
+ <button commandfor="the-popover"
+ command="hide-popover">
+ Hide menu
+ </button>
+</div>
+ The following buttons use commandfor with a custom command on an element, demonstrating how + one could utilise custom commands for unspecified behavior:
+ +<button type=button
+ commandfor="the-image"
+ command="--rotate-left">
+ Rotate Left
+</button>
+<button type=button
+ commandfor="the-image"
+ command="--rotate-right">
+ Rotate Right
+</button>
+<img id="the-image"
+ src="photo.jpg">
+<script>
+ const image = document.getElementById("the-image");
+ image.addEventListener("command", (event) => {
+ if ( event.command == "--rotate-left" ) {
+ event.target.style.rotate = "-90deg"
+ } else if ( event.command == "--rotate-right" ) {
+ event.target.style.rotate = "90deg"
+ }
+ });
+</script>
+ select elementIf this has an open attribute and the
- is modal flag of this is true, then return.
Show this as modal.
If this has an open attribute, then
- throw an "InvalidStateError" DOMException.
When a dialog element subject is to be shown as modal, run these steps:
If this's node document is not fully active, then +
If subject has an open attribute and
+ the is modal flag of subject is true, then return.
If subject has an open attribute, then
throw an "InvalidStateError" DOMException.
If this is not connected, then throw an +
If subject's node document is not fully active,
+ then throw an "InvalidStateError" DOMException.
If subject is not connected, then throw an
"InvalidStateError" DOMException.
If this is in the popover showing
- state, then throw an "InvalidStateError"
- DOMException.
If subject is in the popover showing state, then throw an
+ "InvalidStateError" DOMException.
If the result of firing an event named beforetoggle, using ToggleEvent, with the cancelable attribute initialized to true, the oldState attribute initialized to "closed", and the newState
- attribute initialized to "open" at this is false, then
+ attribute initialized to "open" at subject is false, then
return.
If this has an open attribute,
+
If subject has an open attribute,
then return.
If this is not connected, then return.
If subject is not connected, then return.
If this is in the popover showing - state, then return.
If subject is in the popover showing state, then return.
Queue a dialog toggle event task given subject, "closed", and "open".
Add an open attribute to this, whose
+
Add an open attribute to subject, whose
value is the empty string.
Set the is modal flag of this to true.
Set the is modal flag of subject to true.
Let this's node document be blocked by the modal dialog this.
+Let subject's node document be blocked by the modal dialog subject.
This will cause the focused area of the document to become inert (unless that currently focused area is a @@ -61913,41 +62170,41 @@ interface HTMLDialogElement : HTMLElement { focus.
If this's node document's top layer does not - already contain this, then add an element - to the top layer given this.
If subject's node document's top layer does not + already contain subject, then add an element + to the top layer given subject.
Set this's close watcher to the +
Set subject's close watcher to the result of establishing a close watcher given - this's relevant global object, with:
+ subject's relevant global object, with:cancelAction given
canPreventClose being to return the result of firing an event named cancel at this, with the cancel at subject, with the cancelable attribute initialized to
canPreventClose.
closeAction being to close the - dialog given this and null.
Set this's previously focused element to the +
Set subject's previously focused element to the focused element.
Let hideUntil be the result of running topmost popover ancestor - given this, null, and false.
If hideUntil is null, then set hideUntil to this's +
If hideUntil is null, then set hideUntil to subject's node document.
Run hide all popovers until given hideUntil, false, and true.
Run the dialog focusing steps given this.
Run the dialog focusing steps given subject.
The dialog focusing steps, given a dialog element subject,
@@ -61989,6 +62246,78 @@ interface HTMLDialogElement : HTMLElement {
Set topDocument's autofocus processed flag to true.
The is valid invoker command steps, given a dialog element
+ subject and command, are:
If command is in the close state, then return true.
If command is in the show modal state, then return true.
+Return false.
The invoker command steps, given a dialog element
+ invokee, invoker, and command, are:
If invokee is in the popover showing state, then return.
If command is in the close state, then:
+ +If invokee has an open attribute, then:
Let value be invoker's value
Close the dialog invokee with value.
If command is in the show modal state, then:
+ +If invokee does not have an open
+ attribute, then show modal dialog invokee.
The following buttons use commandfor to open and close a "confirm" dialog as modal when + activated:
+ +<button type=button
+ commandfor="the-dialog"
+ command="show-modal">
+ Delete
+</button>
+<dialog id="the-dialog">
+ <form action="/delete" method="POST">
+ <button type="submit">
+ Delete
+ </button>
+ <button commandfor="the-dialog"
+ command="close">
+ Cancel
+ </button>
+ </form>
+</dialog>
+ The dialog HTML element removing steps, given removedNode
and oldParent, are:
If removedNode's node document's top layer contains removedNode, then remove an element from - the top layer immediately given removedNode.
Set the is modal flag of removedNode to false.
Close the dialog this with returnValue.
When a dialog element subject is to be closed, with null or a string result, run these steps:
When a dialog element subject is to be closed, with null or a string result, run these
+ steps:
If subject does not have an open
@@ -62044,11 +62375,12 @@ interface HTMLDialogElement : HTMLElement {
Remove subject's open
attribute.
If the is modal flag of subject is true, then request an - element to be removed from the top layer given subject.
If the is modal flag of subject is true, then + request an element to be removed from the top layer given subject.
+Let wasModal be the value of subject's is - modal flag.
Let wasModal be the value of subject's + is modal flag.
Set the is modal flag of subject to false.
Queue an element task on the user interaction task source given the - subject element to fire an event named +
Queue an element task on the user interaction task source given
+ the subject element to fire an event named
close at subject.
If subject's close watcher is not null, - then:
+If subject's close watcher is not + null, then:
Destroy subject's ToggleEventInit : EventInit {
the Returns what action the element can take. Returns the The The oldState attribute.
+ The
+
+ CommandEvent interface
+
+ [Exposed=Window]
+interface CommandEvent : Event {
+ constructor(DOMString type, optional CommandEventInit eventInitDict = {});
+ readonly attribute Element? source;
+ readonly attribute DOMString action;
+};
+
+dictionary CommandEventInit : EventInit {
+ Element? source = null;
+ DOMString action = "auto";
+};
+
+
+ event.commandevent.sourceElement that was interacted with in order to cause this event.command attribute must return the value it as
+ initialized to.source getter steps are to
+ return the result of retargeting source against this's currentTarget.Focus
@@ -86550,7 +86921,6 @@ dictionary DragEventInit : MouseEventInit {
onchange change
onclick click
onclose close
+ oncommand command
oncontextlost contextlost
oncontextmenu contextmenu
oncontextrestored contextrestored
@@ -113555,6 +113926,7 @@ typedef OnBeforeUnloadEventHandlerNonNull? OnBeforeUnl
attribute EventHandler onchange;
attribute EventHandler onclick;
attribute EventHandler onclose;
+ attribute EventHandler oncommand;
attribute EventHandler oncontextlost;
attribute EventHandler oncontextmenu;
attribute EventHandler oncontextrestored;
@@ -142509,6 +142881,22 @@ interface External {
script
command
+ button
+ toggle-popover";
+ "show-popover";
+ "hide-popover";
+ "close";
+ "show-modal";
+ a valid custom command;
+ the empty string
+ commandfor
+ button
+ is
close event handler
oncommand
+ command event handler
+ oncontextlost
CloseWatcher, dialog elements, MessagePort
CloseWatcher objects or dialog elements when they are closed via a close request or via web developer code, or at MessagePort objects when disentangled
+ command
+ CommandEvent
+ commandfor attribute.
+
connect
MessageEvent