Monster.DOM. CustomElement

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.

This method is called by the instanceof operator.

This method determines which attributes are to be monitored by attributeChangedCallback(). Unfortunately, this method is static. Therefore, the observedAttributes property cannot be changed during runtime.

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

This method is called once when the object is included in the DOM for the first time. It performs the following actions:

1. Extracts the options from the attributes and the script tag of the element and sets them.
2. Initializes the shadow root and its CSS stylesheet (if specified).
3. Initializes the HTML content of the element.
4. Initializes the custom elements inside the shadow root and the slotted elements.
5. Attaches a mutation observer to observe changes to the attributes of the element.

attach a new observer

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.

Calls a callback function if it exists.

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.

detach a observer

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

nested options can be specified by path a.b.c

Is called once via the constructor

Set option and inform elements

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.

The getCSSStyleSheet() method returns a CSSStyleSheet object that defines the styles for the custom element. If the environment does not support the CSSStyleSheet constructor, then an object can be built using the provided detour.

If undefined is returned, then the shadow root does not receive a stylesheet.

Example usage:

static getCSSStyleSheet() {
    const sheet = new CSSStyleSheet();
    sheet.replaceSync("p { color: red; }");
    return sheet;
}

If the environment does not support the CSSStyleSheet constructor, you can use the following workaround to create the stylesheet:

const doc = document.implementation.createHTMLDocument('title');
let style = doc.createElement("style");
style.innerHTML = "p { color: red; }";
style.appendChild(document.createTextNode(""));
doc.head.appendChild(style);
return doc.styleSheets[0];

The getTag() method returns the tag name associated with the custom element. This method should be overwritten by the derived class.

Note that there is no check on the name of the tag in this class. It is the responsibility of the developer to assign an appropriate tag name. If the name is not valid, the registerCustomElement() method will issue an error.