Constructor
new CustomControl()
A base class for custom controls based on CustomElement.
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: CustomElementRegistry.define() CustomElementRegistry.get() and ElementInternals
- Since
- 1.14.0
- Copyright
- schukai GmbH
- License
- AGPLv3
the ElementInternals is not supported and a polyfill is necessary
- Type
- Error
Extends
Members
defaults
defaults
property defines the default values for a control.The defaults
property defines the default values for a control. If you want to override these, you can use various methods, which are described in the documentation available at https://monsterjs.orgendocconfigurate-a-monster-control.
The individual configuration values are listed below:
More information about the shadowRoot can be found in the MDN Web Docs, in the HTML Standard or in the WHATWG Wiki.
More information about the template element can be found in the MDN Web Docs.
More information about the slot element can be found in the MDN Web Docs.
Name | Type | Default | Description | ||||||
---|---|---|---|---|---|---|---|---|---|
disabled | boolean | false | Specifies whether the control is disabled. When present, it makes the element non-mutable, non-focusable, and non-submittable with the form. | ||||||
shadowMode | string | open | Specifies the mode of the shadow root. When set to | ||||||
delegatesFocus | Boolean | true | Specifies the behavior of the control with respect to focusability. When set to | ||||||
templates | Object | Specifies the templates used by the control. Properties
| |||||||
templateMapping | Object | Specifies the mapping of templates. |
- Since
- 1.8.0
- Overrides
form
This is a method of internal api
.This is a method of internal api
- Since
- 1.14.0
formAssociated
formAssociated
property, with a true value, makes an autonomous custom element a form-associated custom element.Adding a static formAssociated
property, with a true value, makes an autonomous custom element a form-associated custom element.
- Since
- 1.14.0
labels
This is a method of internal api
.This is a method of internal api
- Since
- 1.14.0
name
This is a method of internal api
.This is a method of internal api
states
This is a method of internal api
.This is a method of internal api
- Since
- 1.14.0
type
This is a method of internal api
.This is a method of internal api
validationMessage
This is a method of internal api
.This is a method of internal api
- Since
- 1.14.0
validity
This is a method of internal api
.This is a method of internal api
value
Must be overridden by a derived class and return the value of the control.
This is a method of internal API, which is a part of the web standard for custom elements.
- Since
- 1.14.0
value
Must be overridden by a derived class and set the value of the control.
This is a method of internal API, which is a part of the web standard for custom elements.
- Since
- 1.14.0
willValidate
This is a method of internal api
.This is a method of internal api
- Since
- 1.14.0
(static) instanceSymbol
instanceof
operator.This method is called by the instanceof
operator.
- Since
- 2.1.0
(static) observedAttributes
attributeChangedCallback()
.This method determines which attributes are to be monitored by attributeChangedCallback()
.
- Since
- 1.15.0
Methods
addAttributeObserver(attribute, callback) → {Monster.DOM.CustomElement}
Name | Type | Description |
---|---|---|
attribute | ||
callback |
adoptedCallback() → {void}
The custom element has been moved into a new document (e.g. someone called document.adoptNode(el)).
- Since
- 1.7.0
- Type:
- void
assembleMethodSymbol() → {CustomElement}
This method is called once when the object is included in the DOM for the first time. It performs the following actions:
- Extracts the options from the attributes and the script tag of the element and sets them.
- Initializes the shadow root and its CSS stylesheet (if specified).
- Initializes the HTML content of the element.
- Initializes the custom elements inside the shadow root and the slotted elements.
- Attaches a mutation observer to observe changes to the attributes of the element.
- Since
- 1.8.0
- The updated custom element.
- Type:
- CustomElement
attachObserver(observer) → {CustomElement}
attach a new observer
.attach a new observer
Name | Type | Description |
---|---|---|
observer | Observer |
- Type:
- CustomElement
attributeChangedCallback(attrName, oldVal, newVal) → {void}
Called when an observed attribute has been added, removed, updated, or replaced. Also called for initial values when an element is created by the parser, or upgraded. Note: only attributes listed in the observedAttributes property will receive this callback.
Name | Type | Description |
---|---|---|
attrName | string | |
oldVal | string | |
newVal | string |
- Since
- 1.15.0
- Type:
- void
callCallback(name, args) → {*}
Calls a callback function if it exists.
Name | Type | Description |
---|---|---|
name | string | |
args | * |
- Type:
- *
checkValidity() → {boolean}
This is a method of internal api
.This is a method of internal api
- Since
- 1.14.0
NotSupportedError
- Type
- DOMException
the ElementInternals is not supported and a polyfill is necessary
- Type
- Error
- Type:
- boolean
connectedCallback() → {void}
This method is called every time the element is inserted into the DOM. It checks if the custom element has already been initialized and if not, calls the assembleMethod to initialize it.
- Since
- 1.7.0
- Type:
- void
containsObserver(observer) → {ProxyObserver}
Name | Type | Description |
---|---|---|
observer | Observer |
- Type:
- ProxyObserver
detachObserver(observer) → {CustomElement}
detach a observer
.detach a observer
Name | Type | Description |
---|---|---|
observer | Observer |
- Type:
- CustomElement
disconnectedCallback() → {void}
Called every time the element is removed from the DOM. Useful for running clean up code.
- Since
- 1.7.0
- Type:
- void
formAssociatedCallback(form)
form
attribute of the custom control to the id
of the passed form element.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.
Name | Type | Description |
---|---|---|
form | HTMLFormElement | The form element to associate with the control |
formDisabledCallback(disabled)
disabled
attribute of the custom control based on the passed value.Sets or removes the disabled
attribute of the custom control based on the passed value.
Name | Type | Description |
---|---|---|
disabled | boolean | Whether or not the control should be disabled |
formResetCallback()
formStateRestoreCallback(state, mode)
Name | Type | Description |
---|---|---|
state | string | |
mode | string |
getOption(path, defaultValue) → {*}
nested options can be specified by path a.b.c
nested options can be specified by path a.b.c
Name | Type | Description |
---|---|---|
path | string | |
defaultValue | * |
- Since
- 1.10.0
- Overrides
- Type:
- *
hasNode(node) → {boolean}
Name | Type | Description |
---|---|---|
node | Node |
- Since
- 1.19.0
- Overrides
value is not an instance of
- Type
- TypeError
- Type:
- boolean
initMethodSymbol() → {CustomElement}
Is called once via the constructor
.Is called once via the constructor
- Since
- 1.8.0
- Type:
- CustomElement
removeAttributeObserver(attribute) → {Monster.DOM.CustomElement}
Name | Type | Description |
---|---|---|
attribute |
reportValidity() → {boolean}
This is a method of internal api
.This is a method of internal api
- Since
- 1.14.0
the ElementInternals is not supported and a polyfill is necessary
- Type
- Error
NotSupportedError
- Type
- DOMException
- Type:
- boolean
setFormValue(value, state) → {undefined}
This is a method of internal api
// 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);
.This is a method of internal api
// 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);
Name | Type | Description |
---|---|---|
value | File | | |
state | File | |
- Since
- 1.14.0
NotSupportedError
- Type
- DOMException
the ElementInternals is not supported and a polyfill is necessary
- Type
- Error
- Type:
- undefined
setOption(path, value) → {CustomElement}
Set option and inform elements
.Set option and inform elements
Name | Type | Description |
---|---|---|
path | string | |
value | * |
- Since
- 1.14.0
- Overrides
- Type:
- CustomElement
setOptions(options) → {CustomElement}
Name | Type | Description |
---|---|---|
options | string | |
- Since
- 1.15.0
- Overrides
- Type:
- CustomElement
setValidity(flags, message, anchor) → {undefined}
Name | Type | Description |
---|---|---|
flags | object | |
message | string | | |
anchor | HTMLElement |
- Since
- 1.14.0
NotSupportedError
- Type
- DOMException
the ElementInternals is not supported and a polyfill is necessary
- Type
- Error
- Type:
- undefined
updateI18n() → {Monster.DOM.CustomElement}
This method updates the labels of the element. The labels are defined in the options object. The key of the label is used to retrieve the translation from the document. If the translation is different from the label, the label is updated.
Before you can use this method, you must have loaded the translations.
- Overrides
Cannot find element with translations. Add a translations object to the document.
- Type
- Error