CustomControl
A base class for custom controls based on CustomElement.
Import
import { CustomControl } from "@schukai/monster/source/dom/customcontrol.mjs";Source
'%3E%3Cpath style='stroke:none;fill-rule:nonzero;fill:%23f03c2e;fill-opacity:1' d='M90.156 41.965 50.036 1.848a5.918 5.918 0 0 0-8.372 0l-8.328 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.034 7.034 0 0 1 1.669 7.277l10.187 10.184a7.028 7.028 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.05 7.05 0 0 1-9.965 0 7.044 7.044 0 0 1-1.528-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.06 7.06 0 0 1 2.304-1.539V33.926a7.049 7.049 0 0 1-3.82-9.234L29.242 14.272 1.73 41.777a5.925 5.925 0 0 0 0 8.371L41.852 90.27a5.925 5.925 0 0 0 8.37 0l39.934-39.934a5.925 5.925 0 0 0 0-8.371'/%3E%3C/g%3E%3C/svg%3E "View source code")
Package
Since
1.14.0
Exported
CustomControlDerived from
CustomElementOptions
The Options listed in this section are defined directly within the class. This class is derived from several parent classes. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the CustomElement.
Option
Type
Default
Description
-/-Properties
The Properties listed in this section are defined directly within the class. This class is derived from several parent classes. Therefore, it inherits Properties from these parent classes. If you cannot find a specific Properties in this list, we recommend consulting the documentation of the CustomElement.
Methods
The methods listed in this section are defined directly within the class. This class is derived from several parent classes. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the CustomElement.
Constructor
constructor()Throws
{Error}the ElementInternals is not supported and a polyfill is necessary
The constructor method of CustomControl, which is called when creating a new instance. It checks whether the element supports
attachInternals() and initializes an internal form-associated element if supported. Additionally, it initializes a MutationObserver to watch for attribute changes. See the links below for more information: {@link https://html.spec.whatwg.org/multipage/custom-elements.html#dom-customelementregistry-define|CustomElementRegistry.define()} {@link https://html.spec.whatwg.org/multipage/custom-elements.html#dom-customelementregistry-get|CustomElementRegistry.get()} and {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals|ElementInternals}State query methods
value()Throws
{Error}the value getter must be overwritten by the derived class
Must be overridden by a derived class and return the value of the control. This is a method of [internal API](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals), which is a part of the web standard for custom elements.
value(value)Parameters
value{*}: The value to set.
{Error}the value setter must be overwritten by the derived class
Must be overridden by a derived class and set the value of the control. This is a method of [internal API](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals), which is a part of the web standard for custom elements.
willValidate()Returns
- {boolean}
{Error}the ElementInternals is not supported and a polyfill is necessary
This is a method of [internal api](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)
Structural methods
setFormValue(value,state)Parameters
value{file|string|formdata}: valuestate{file|string|formdata}: state
- {undefined}
{DOMException}NotSupportedError{Error}the ElementInternals is not supported and a polyfill is necessary
This is a method of [internal api](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals) ``
// Use the control's name as the base name for submitted data const n = this.getAttribute('name'); const entries = new FormData(); entries.append(n + '-first-name', this.firstName_); entries.append(n + '-last-name', this.lastName_); this.setFormValue(entries);``setValidity(flags,message,anchor)Parameters
flags{object}: flagsmessage{string|undefined}: messageanchor{htmlelement}: anchor
- {undefined}
{DOMException}NotSupportedError{Error}the ElementInternals is not supported and a polyfill is necessary
Static methods
[instanceSymbol]()2.1.0Returns
- {symbol}
This method is called by the
instanceof operator.observedAttributes()1.15.0Returns
- {string[]}
This method determines which attributes are to be monitored by
attributeChangedCallback().Other methods
checkValidity()Returns
- {boolean}
{DOMException}NotSupportedError{Error}the ElementInternals is not supported and a polyfill is necessary
This is a method of [internal api](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)
form()Returns
- {HTMLFontElement|null}
{Error}the ElementInternals is not supported and a polyfill is necessary
This is a method of [internal api](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)
formAssociatedCallback(form)Parameters
form{htmlformelement}: - The form element to associate with the control
Sets the
form attribute of the custom control to the id of the passed form element. If no form element is passed, removes the form attribute.formDisabledCallback(disabled)Parameters
disabled{boolean}: - Whether or not the control should be disabled
Sets or removes the
disabled attribute of the custom control based on the passed value.formResetCallback()formStateRestoreCallback(state,mode)Parameters
state{string}: statemode{string}: mode
labels()Returns
- {NodeList}
{Error}the ElementInternals is not supported and a polyfill is necessary
This is a method of [internal api](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)
name()Returns
- {string|null}
This is a method of [internal api](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)
reportValidity()Returns
- {boolean}
{Error}the ElementInternals is not supported and a polyfill is necessary{DOMException}NotSupportedError
This is a method of [internal api](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)
states()Returns
- {boolean}
{Error}the ElementInternals is not supported and a polyfill is necessary
This is a method of [internal api](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)
type()Returns
- {string}
This is a method of [internal api](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)
validationMessage()Returns
- {string}
{Error}the ElementInternals is not supported and a polyfill is necessary
This is a method of [internal api](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)
validity()Returns
- {ValidityState}
{Error}the ElementInternals is not supported and a polyfill is necessary
This is a method of [internal api](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)
Events
This component does not fire any public events. It may fire events that are inherited from its parent classes.