Constructor
new CustomElement()
A base class for HTML5 customcontrols
A new object is created. First the initOptions
method is called. Here the options can be defined in derived classes. Subsequently, the shadowRoot is initialized.
- Since
- 1.7.0
- Copyright
- schukai GmbH
- License
- AGPLv3
the options attribute does not contain a valid json definition.
- Type
- Error
import {getDocumentTheme} from '@schukai/monster/source/dom/theme.mjs';
const theme = getDocumentTheme();
console.log(theme.getName());
// ↦ monster
Extends
Members
defaults
Derived classes can override and extend this method as follows.
get defaults() {
return Object.assign({}, super.defaults, {
myValue:true
});
}
To set the options via the html tag the attribute data-monster-options must be set. As value a JSON object with the desired values must be defined.
Since 1.18.0 the JSON can be specified as a DataURI.
new Monster.Types.DataUrl(btoa(JSON.stringify({
shadowMode: 'open',
delegatesFocus: true,
templates: {
main: undefined
}
})),'application/json',true).toString()
The attribute data-monster-options-selector can be used to access a script tag that contains additional configuration.
As value a selector must be specified, which belongs to a script tag and contains the configuration as json.
<script id="id-for-this-config" type="application/json">
{
"config-key": "config-value"
}
</script>
The individual configuration values can be found in the table.
Name | Type | Default | Description | ||||||
---|---|---|---|---|---|---|---|---|---|
disabled | boolean | false | Object The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. | ||||||
shadowMode | string | open |
| ||||||
delegatesFocus | Boolean | true | A boolean that, when set to true, specifies behavior that mitigates custom element issues around focusability. When a non-focusable part of the shadow DOM is clicked, the first focusable part is given focus, and the shadow host is given any available :focus styling. | ||||||
templates | Object | Templates Properties
|
- Since
- 1.8.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
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}
Is called once when the object is included in the DOM for the first time.
- Since
- 1.8.0
- 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
connectedCallback() → {void}
Called every time the element is inserted into the DOM. Useful for running setup code, such as fetching resources or rendering. Generally, you should try to delay work until this time.
- 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
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
- Type:
- *
hasNode(node) → {boolean}
Name | Type | Description |
---|---|---|
node | Node |
- Since
- 1.19.0
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
setOption(path, value) → {CustomElement}
Set option and inform elements
.Set option and inform elements
Name | Type | Description |
---|---|---|
path | string | |
value | * |
- Since
- 1.14.0
- Type:
- CustomElement
setOptions(options) → {CustomElement}
Name | Type | Description |
---|---|---|
options | string | |
- Since
- 1.15.0
- Type:
- CustomElement
(static) getCSSStyleSheet() → {CSSStyleSheet|Array.<CSSStyleSheet>|string|undefined}
CSSStyleSheet
object can be returned.At this point a CSSStyleSheet
object can be returned. If the environment does not support a constructor, then an object can also be built using the following detour.
If undefined
is returned then the shadowRoot does not get a stylesheet.
const doc = document.implementation.createHTMLDocument('title');
let style = doc.createElement("style");
style.innerHTML="p{color:red;}";
// WebKit Hack
style.appendChild(document.createTextNode(""));
// Add the <style> element to the page
doc.head.appendChild(style);
return doc.styleSheets[0];
;
- Type:
- CSSStyleSheet |
Array.<CSSStyleSheet> | string | undefined
(static) getTag() → {string}
There is no check on the name by this class. the developer is responsible for assigning an appropriate tag. if the name is not valid, registerCustomElement() will issue an error
- Since
- 1.7.0
the method getTag must be overwritten by the derived class.
- Type
- Error
- Type:
- string