You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: ElementInternalsType/explainer.md
+8-3Lines changed: 8 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -48,10 +48,9 @@ If `behavesLike` is assigned any other value, a ["NotSupportedError"](https://we
48
48
49
49
50
50
### `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 attributesand 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.
52
52
53
53
**Supported attributes:**
54
-
-`autofocus` - Automatically focus the form control when the page is loaded
55
54
-`disabled` - Whether the form control is disabled
56
55
-`form` - Associates the element with a form element
57
56
-`formaction` - URL to use for form submission
@@ -69,7 +68,7 @@ When `static behavesLike = 'button'` is set in a custom element's class definiti
69
68
-`interesttarget` - [currently experimental in Chromium](https://chromestatus.com/feature/4530756656562176?gate=4768466822496256)
70
69
71
70
**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:
73
72
-`disabled` - reflects the `disabled` attribute
74
73
-`form` - returns the associated HTMLFormElement
75
74
-`formAction` - reflects the `formaction` attribute
@@ -89,6 +88,12 @@ The `elementInternals.buttonMixin` property provides access to a `ButtonInternal
89
88
-`popoverTargetAction` - returns the value of the `popovertargetaction` attribute
90
89
-`popoverTargetElement` - returns the Element referenced by the `popovertarget` attribute
91
90
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
+
92
97
Below is an example showcasing a custom button being used as a popup invoker with access to both attributes and DOM properties:
0 commit comments