CustomElement

Monster/DOM. CustomElement

To define a new HTML element we need the power of CustomElement

you can call the method via the monster namespace new Monster.DOM.Element().

important: after defining a CustomElement, the registerCustomElement method must be called with the new class name. only then will the tag defined via the getTag method be made known to the DOM.

<script type="module">
import {CustomElement} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.7.0/dist/modules/dom/customelement.js';
console.log(new Monster.DOM.CustomElement())
</script>

Alternatively, you can also integrate this function individually.

<script type="module">
import {CustomElement} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.7.0/dist/modules/dom/customelement.js';
console.log(new CustomElement())
</script>

Styling

For optimal display of custom-elements the pseudo-class :defined can be used.

<style>

my-custom-element:not(:defined) {
    display: none;
}

my-custom-element:defined {
    display: flex;
}

</style>
  • @example // returns 2 globalNS.method1(5, 10);

Constructor

# new CustomElement()

Since:
  • 1.7.0
Example
// returns 3
globalNS.method(5, 15);

Methods

# (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

Throws:

the method getTag must be overwritten by the derived class.

Type
Error
Returns:
Type
string

# adoptedCallback() → {void}

The custom element has been moved into a new document (e.g. someone called document.adoptNode(el)).

Returns:
Type
void

# 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.

Parameters:
Name Type Description
attrName string
oldVal string
newVal string
Returns:
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.

Returns:
Type
void

# disconnectedCallback() → {void}

Called every time the element is removed from the DOM. Useful for running clean up code.

Returns:
Type
void