Skip to content

Commit 9df1cfd

Browse files
authored
[ElementInternalsType] add Supported methods for button (#1144)
1) remove autofocus attribute per #1130 (comment) 2) add button methods
1 parent b084518 commit 9df1cfd

1 file changed

Lines changed: 8 additions & 3 deletions

File tree

ElementInternalsType/explainer.md

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,9 @@ If `behavesLike` is assigned any other value, a ["NotSupportedError"](https://we
4848

4949

5050
### `static behavesLike = 'button'` and `elementInternals.buttonMixin`
51-
When `static behavesLike = 'button'` is set in a custom element's class definition, the custom element will gain support for all button-specific attributes and properties.
51+
When `static behavesLike = 'button'` is set in a custom element's class definition, the custom element will gain support for all button-specific attributes, properties, and methods.
5252

5353
**Supported attributes:**
54-
- `autofocus` - Automatically focus the form control when the page is loaded
5554
- `disabled` - Whether the form control is disabled
5655
- `form` - Associates the element with a form element
5756
- `formaction` - URL to use for form submission
@@ -69,7 +68,7 @@ When `static behavesLike = 'button'` is set in a custom element's class definiti
6968
- `interesttarget` - [currently experimental in Chromium](https://chromestatus.com/feature/4530756656562176?gate=4768466822496256)
7069

7170
**Supported properties:**
72-
The `elementInternals.buttonMixin` property provides access to a `ButtonInternals` interface that exposes button-specific properties:
71+
The `elementInternals.buttonMixin` property provides access to button-specific properties:
7372
- `disabled` - reflects the `disabled` attribute
7473
- `form` - returns the associated HTMLFormElement
7574
- `formAction` - reflects the `formaction` attribute
@@ -89,6 +88,12 @@ The `elementInternals.buttonMixin` property provides access to a `ButtonInternal
8988
- `popoverTargetAction` - returns the value of the `popovertargetaction` attribute
9089
- `popoverTargetElement` - returns the Element referenced by the `popovertarget` attribute
9190

91+
**Supported methods:**
92+
The `elementInternals.buttonMixin` property also provides access to button-specific methods:
93+
- `checkValidity()` - returns true if the element's value has no validity problems; If false, the method also fires an invalid event on the custom element.
94+
- `reportValidity()` - performs the same validity checking steps as the checkValidity() method, and if the invalid event isn't canceled, reports the problem to the user
95+
- `setCustomValidity(message)` - sets a custom error message that is displayed when the form is submitted
96+
9297
Below is an example showcasing a custom button being used as a popup invoker with access to both attributes and DOM properties:
9398

9499
```js

0 commit comments

Comments
 (0)