Constructor
# new CustomElement()
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
-
the options attribute does not contain a valid json definition.
- Type
- Error
// In the example the HTML structure is taken from the getTemplate method. The user can use his own template by creating a template in the DOM with the ID `monster-my-element`.
// You can also specify a theme (for example `mytheme`), then it will search for the ID `monster-my-element-mytheme` and if not available for the ID `monster-my-element`.
class MonsterMyElement extends CustomElement {
constructor() {
super();
}
getTemplate() {
return `<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="">
Checkvalue
</label>
</div>`
}
static getTag() {
return "monster-my-element"
}
}
// ↦ <monster-my-element></monster-my-element>
Members
# defaults
option | description |
---|---|
shadowMode | open Elements of the shadow root are accessible from JavaScript outside the root, for example using. close Denies access to the node(s) of a closed shadow root from JavaScript outside it |
delegatesFocus | 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. |
Derived classes can override and extend this method as follows.
get defaults() {
return Object.assign({}, super.defaults, {
myValue:true
});
}
- Since:
- 1.8.0
Methods
# (static) getCSSStyleSheet() → {CSSStyleSheet}
- Type
- CSSStyleSheet
# (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 erro
-
the method getTag must be overwritten by the derived class.
- Type
- Error
- Type
- string
# (static) getTemplate() → {string}
This method defines the default template if no template with the id is found in the dom.
- Since:
- 1.8.0
-
the method getTemplate must be overwritten by the derived class.
- Type
- Error
- Type
- string
# adoptedCallback() → {void}
The custom element has been moved into a new document (e.g. someone called document.adoptNode(el)).
- Type
- void
# assemble() → {CustomElement}
- Since:
- 1.8.0
- 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 |
- 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.
- Type
- void
# disassemble() → {CustomElement}
- Since:
- 1.8.0
- Type
- CustomElement
# disconnectedCallback() → {void}
Called every time the element is removed from the DOM. Useful for running clean up code.
- Type
- void
# getOption(key, *}) → {*}
Name | Type | Description |
---|---|---|
key |
string | |
*} |
defaultValue |
- Since:
- 1.8.0
- Type
- *
# init() → {CustomElement}
- Since:
- 1.8.0
- Type
- CustomElement