DOM

Monster. DOM

In this namespace you will find classes and methods for handling the DOM.

Author:
  • schukai GmbH

Classes

Assembler

Allows you to build an html fragment

CustomControl

A base class for customcontrols based on CustomElement

CustomElement

A base class for HTML5 customcontrols

FocusManager

Handle the focus

Resource

A Resource class

ResourceManager

A Resource class

Template

A template class

Theme

A theme class

Updater

The updater class connects an object with the dom

Members

# (static, constant) assembleMethodSymbol :symbol

Type:
  • symbol

# (static, constant) ATTRIBUTE_ACCESSKEY :string

Type:
  • string
Since:
  • 1.25.0

# (static, constant) ATTRIBUTE_AUTOCAPITALIZE :string

Type:
  • string
Since:
  • 1.25.0

# (static, constant) ATTRIBUTE_AUTOFOCUS :string

Type:
  • string
Since:
  • 1.25.0

# (static, constant) ATTRIBUTE_CLASS :string

Type:
  • string
Since:
  • 1.25.0

# (static, constant) ATTRIBUTE_CONTENTEDITABLE :string

Type:
  • string
Since:
  • 1.25.0

# (static, constant) ATTRIBUTE_DIR :string

Type:
  • string
Since:
  • 1.25.0

# (static, constant) ATTRIBUTE_DISABLED :string

Type:
  • string
Since:
  • 1.24.0

# (static, constant) ATTRIBUTE_DRAGGABLE :string

Type:
  • string
Since:
  • 1.25.0

# (static, constant) ATTRIBUTE_ENTERKEYHINT :string

Type:
  • string
Since:
  • 1.25.0

# (static, constant) ATTRIBUTE_ERRORMESSAGE :string

Type:
  • string
Since:
  • 1.24.0

# (static, constant) ATTRIBUTE_EXPORTPARTS :string

Type:
  • string
Since:
  • 1.25.0

# (static, constant) ATTRIBUTE_HIDDEN :string

Type:
  • string
Since:
  • 1.25.0

# (static, constant) ATTRIBUTE_HREF :string

Type:
  • string
Since:
  • 1.25.0

# (static, constant) ATTRIBUTE_ID :string

Type:
  • string
Since:
  • 1.25.0

# (static, constant) ATTRIBUTE_INPUTMODE :string

Type:
  • string
Since:
  • 1.25.0

# (static, constant) ATTRIBUTE_IS :string

Type:
  • string
Since:
  • 1.25.0

# (static, constant) ATTRIBUTE_ITEMID :string

Type:
  • string
Since:
  • 1.25.0

# (static, constant) ATTRIBUTE_ITEMPROP :string

Type:
  • string
Since:
  • 1.25.0

# (static, constant) ATTRIBUTE_ITEMREF :string

Type:
  • string
Since:
  • 1.25.0

# (static, constant) ATTRIBUTE_ITEMSCOPE :string

Type:
  • string
Since:
  • 1.25.0

# (static, constant) ATTRIBUTE_ITEMTYPE :string

Type:
  • string
Since:
  • 1.25.0

# (static, constant) ATTRIBUTE_LANG :string

Type:
  • string
Since:
  • 1.25.0

# (static, constant) ATTRIBUTE_NONCE :string

Type:
  • string
Since:
  • 1.25.0
Type:
  • string
Since:
  • 1.9.0

# (static, constant) ATTRIBUTE_OPTIONS :string

This is the name of the attribute to pass options to a control

Type:
  • string
Since:
  • 1.8.0

# (static, constant) ATTRIBUTE_OPTIONS_SELECTOR :string

This is the name of the attribute to pass options to a control

Type:
  • string
Since:
  • 1.30.0

# (static, constant) ATTRIBUTE_PART :string

Type:
  • string
Since:
  • 1.25.0

# (static, constant) ATTRIBUTE_PREFIX :string

Type:
  • string
Since:
  • 1.8.0

# (static, constant) ATTRIBUTE_ROLE :string

Type:
  • string
Since:
  • 1.14.0

# (static, constant) ATTRIBUTE_SLOT :string

Type:
  • string
Since:
  • 1.25.0

# (static, constant) ATTRIBUTE_SPELLCHECK :string

Type:
  • string
Since:
  • 1.25.0

# (static, constant) ATTRIBUTE_SRC :string

Type:
  • string
Since:
  • 1.25.0

# (static, constant) ATTRIBUTE_TABINDEX :string

Type:
  • string
Since:
  • 1.25.0

# (static, constant) ATTRIBUTE_TEMPLATE_PREFIX :string

Type:
  • string
Since:
  • 1.27.0

# (static, constant) ATTRIBUTE_THEME_NAME :string

Type:
  • string

# (static, constant) ATTRIBUTE_THEME_PREFIX :string

Type:
  • string
Since:
  • 1.8.0

# (static, constant) ATTRIBUTE_TITLE :string

Type:
  • string
Since:
  • 1.25.0

# (static, constant) ATTRIBUTE_TRANSLATE :string

Type:
  • string
Since:
  • 1.25.0

# (static, constant) ATTRIBUTE_TYPE :string

Type:
  • string
Since:
  • 1.25.0

# (static, constant) ATTRIBUTE_UPDATER_ATTRIBUTES :string

Type:
  • string
Since:
  • 1.8.0

# (static, constant) ATTRIBUTE_UPDATER_BIND :string

Type:
  • string
Since:
  • 1.9.0

# (static, constant) ATTRIBUTE_UPDATER_INSERT :string

Type:
  • string
Since:
  • 1.8.0

# (static, constant) ATTRIBUTE_UPDATER_INSERT_REFERENCE :string

Type:
  • string
Since:
  • 1.8.0

# (static, constant) ATTRIBUTE_UPDATER_REMOVE :string

Type:
  • string
Since:
  • 1.8.0

# (static, constant) ATTRIBUTE_UPDATER_REPLACE :string

Type:
  • string
Since:
  • 1.8.0

# (static, constant) ATTRIBUTE_UPDATER_SELECT_THIS :string

Type:
  • string
Since:
  • 1.27.1

# (static, constant) ATTRIBUTE_VALUE :string

Type:
  • string
Since:
  • 1.24.0

# (static, constant) attributeObserverSymbol :symbol

this symbol holds the attribute observer callbacks. The key is the attribute name.

Type:
  • symbol

# (static, constant) ATTRIBUTEPREFIX :string

attribute prefix

Type:
  • string

# (static, constant) DEFAULT_THEME :string

default theme

Type:
  • string

# (static, constant) initMethodSymbol :symbol

Type:
  • symbol

# (static, constant) objectUpdaterLinkSymbol :symbol

Type:
  • symbol
Since:
  • 1.24.0
Type:
  • string
Since:
  • 1.25.0

# (static, constant) TAG_SCRIPT :string

Type:
  • string
Since:
  • 1.25.0

# (static, constant) TAG_STYLE :string

Type:
  • string
Since:
  • 1.25.0

Methods

# (static) addAttributeToken(element, key, token) → {HTMLElement}

This method can be used to add a token to an attribute. Tokens are always separated by a space.

You can call the method via the monster namespace new Monster.DOM.addAttributeToken().

<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/monster.js';
Monster.DOM.addAttributeToken();
</script>

Alternatively, you can also integrate this function individually.

<script type="module">
import {addAttributeToken} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/modules/dom/attributes.js';
addAttributeToken();
</script>
Parameters:
Name Type Description
element HTMLElement
key string
token string
Since:
  • 1.9.0
Returns:
Type
HTMLElement

You can call the method via the monster namespace new Monster.DOM.addToObjectLink().

<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/monster.js';
Monster.DOM.addToObjectLink();
</script>

Alternatively, you can also integrate this function individually.

<script type="module">
import {addToObjectLink} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/modules/dom/attributes.js';
addToObjectLink();
</script>
Parameters:
Name Type Description
element HTMLElement
symbol Symbol
object Object
Since:
  • 1.9.0
Returns:
Type
boolean

# (static) assignUpdaterToElement(element, object) → {Array.<Promise>}

Parameters:
Name Type Description
element
object
Since:
  • 1.23.0
Returns:
Type
Array.<Promise>

# (static) clearAttributeTokens(element, key) → {HTMLElement}

Tokens are always separated by a space.

You can call the method via the monster namespace new Monster.DOM.clearAttributeTokens().

<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/monster.js';
Monster.DOM.clearAttributeTokens();
</script>

Alternatively, you can also integrate this function individually.

<script type="module">
import {clearAttributeTokens} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/modules/dom/attributes.js';
clearAttributeTokens();
</script>
Parameters:
Name Type Description
element HTMLElement
key string
Since:
  • 1.9.0
Returns:
Type
HTMLElement

# (static) containsAttributeToken(element, key, token) → {boolean}

This method can be used to determine whether an attribute has a token.

Tokens are always separated by a space.

You can call the method via the monster namespace new Monster.DOM.containsAttributeToken().

<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/monster.js';
Monster.DOM.containsAttributeToken();
</script>

Alternatively, you can also integrate this function individually.

<script type="module">
import {containsAttributeToken} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/modules/dom/attributes.js';
containsAttributeToken();
</script>
Parameters:
Name Type Description
element HTMLElement
key string
token string
Since:
  • 1.9.0
Returns:
Type
boolean

# (static) findClosestByAttribute(element, key, value) → {HTMLElement|undefined}

find closest node

This function searches, starting from an HTMLElemement, for the next element that has a certain attribute.

<div data-my-attribute="2" id="2">
    <div id="1"></div>
</div>
// if no value is specified (undefined), then only the attribute is checked.
findClosestByAttribute(document.getElementById('1'),'data-my-attribute'); // ↦ node with id 2
findClosestByAttribute(document.getElementById('2'),'data-my-attribute'); // ↦ node with id 2

// if a value is specified, for example an empty string, then the name and the value are checked.
findClosestByAttribute(document.getElementById('1'),'data-my-attribute', '');  // ↦ undefined
findClosestByAttribute(document.getElementById('1'),'data-my-attribute', '2'); // ↦ node with id 2

You can call the method via the monster namespace new Monster.DOM.findClosestByAttribute().

<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/monster.js';
Monster.DOM.findClosestByAttribute();
</script>

Alternatively, you can also integrate this function individually.

<script type="module">
import {findClosestByAttribute} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/modules/dom/attributes.js';
findClosestByAttribute();
</script>
Parameters:
Name Type Description
element HTMLElement
key string
value string | undefined
Since:
  • 1.14.0
Returns:
Type
HTMLElement | undefined

# (static) findClosestByClass(element, className) → {HTMLElement|undefined}

find closest node

This function searches, starting from an HTMLElemement, for the next element that has a certain attribute.

<div class="myclass" id="2">
    <div id="1"></div>
</div>
// if no value is specified (undefined), then only the attribute is checked.
findClosestByClass(document.getElementById('1'),'myclass'); // ↦ node with id 2
findClosestByClass(document.getElementById('2'),'myclass'); // ↦ node with id 2

You can call the method via the monster namespace new Monster.DOM.findClosestByClass().

<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/monster.js';
Monster.DOM.findClosestByClass();
</script>

Alternatively, you can also integrate this function individually.

<script type="module">
import {findClosestByClass} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/modules/dom/attributes.js';
findClosestByClass();
</script>
Parameters:
Name Type Description
element HTMLElement
className string
Since:
  • 1.27.0
Returns:
Type
HTMLElement | undefined

Get the closest object link of a node

if a node is specified without a object link, a recursive search upwards is performed until the corresponding object link is found, or undefined is returned.

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

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

Alternatively, you can also integrate this function individually.

<script type="module">
import {getUpdaterFromNode} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/modules/dom/updater.js';
console.log(findClosestObjectLink())
</script>
Parameters:
Name Type Description
element HTMLElement
Since:
  • 1.10.0
Throws:

value is not an instance of HTMLElement

Type
TypeError
Returns:
Type
HTMLElement | undefined

# (static) findDocumentTemplate(id, currentNode) → {Monster.DOM.Template}

This method loads a template with the given ID and returns it.

To do this, it first reads the theme of the document and looks for the data-monster-theme-name attribute in the HTML tag.

<html data-monster-theme-name="my-theme">

If no theme was specified, the default theme is monster.

Now it is looked if there is a template with the given ID and theme id-theme and if yes it is returned. If there is no template a search for a template with the given ID id is done. If this is also not found, an error is thrown.

You can call the method via the monster namespace Monster.DOM.findDocumentTemplate().

<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/monster.js';
Monster.DOM.findDocumentTemplate()
</script>

Alternatively, you can also integrate this function individually.

<script type="module">
import {findTemplate} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/modules/dom/template.js';
findDocumentTemplate()
</script>
Parameters:
Name Type Description
id string
currentNode Node
Since:
  • 1.7.0
Throws:
  • template id not found.

    Type
    Error
  • value is not a string

    Type
    TypeError
Returns:
Type
Monster.DOM.Template
Example
import { findDocumentTemplate } from "https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/modules/dom/template.js";

const template = document.createElement("template");
template.id = "myTemplate";
template.innerHTML = "<p>my default template</p>";
document.body.appendChild(template);

const themedTemplate = document.createElement("template");
themedTemplate.id = "myTemplate-myTheme";
themedTemplate.innerHTML = "<p>my themed template</p>";
document.body.appendChild(themedTemplate);

// loads the temple and since no theme is set the default template
const template1 = findDocumentTemplate("myTemplate");
console.log(template1.createDocumentFragment());
// ↦ '<p>my default template</p>'

// now we set our own theme
document
.querySelector("html")
.setAttribute("data-monster-theme-name", "myTheme");

// now we don't get the default template,
// but the template with the theme in the id
const template2 = findDocumentTemplate("myTemplate");
console.log(template2.createDocumentFragment());
// ↦ '<p>my themed template</p>'

# (static) findTargetElementFromEvent(event, attributeName, attributeValue)

Help function to find the appropriate control

This function gets the path Event.composedPath() from an event and tries to find the next element up the tree element.closest() with the attribute and value. If no value, or a value that is undefined or null, is specified, only the attribute is searched.

You can call the function via the monster namespace new Monster.DOM.findTargetElementFromEvent().

<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/monster.js';
new Monster.DOM.findTargetElementFromEvent()
</script>

Alternatively, you can also integrate this function individually.

<script type="module">
import {findTargetElementFromEvent} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/modules/dom/events.js';
findTargetElementFromEvent()
</script>
Parameters:
Name Type Description
event Event
attributeName string
attributeValue string | null | undefined
Since:
  • 1.14.0
Throws:
  • unsupported event

    Type
    Error
  • value is not a string

    Type
    TypeError
  • value is not an instance of HTMLElement

    Type
    TypeError

# (static) fireCustomEvent(element, type) → {void}

Construct and send and event

You can call the function via the monster namespace new Monster.DOM.fireCustomEvent().

<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/monster.js';
new Monster.DOM.fireCustomEvent()
</script>

Alternatively, you can also integrate this function individually.

<script type="module">
import {fireCustomEvent} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/modules/dom/events.js';
fireCustomEvent()
</script>
Parameters:
Name Type Description
element HTMLElement | HTMLCollection | NodeList
type string
Since:
  • 1.29.0
Throws:

value is not an instance of HTMLElement or HTMLCollection

Type
TypeError
Returns:
Type
void

# (static) fireEvent(element, type) → {void}

Construct and send and event

You can call the function via the monster namespace new Monster.DOM.fireEvent().

<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/monster.js';
new Monster.DOM.fireEvent()
</script>

Alternatively, you can also integrate this function individually.

<script type="module">
import {fireEvent} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/modules/dom/events.js';
fireEvent()
</script>
Parameters:
Name Type Description
element HTMLElement | HTMLCollection | NodeList
type string
Since:
  • 1.10.0
Throws:

value is not an instance of HTMLElement or HTMLCollection

Type
TypeError
Returns:
Type
void

# (static) getDocument() → {object}

this method fetches the document object

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

Alternatively, you can also integrate this function individually.

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

in nodejs this functionality can be performed with jsdom.

import {JSDOM} from "jsdom"
if (typeof window !== "object") {
   const {window} = new JSDOM('', {
       url: 'http://example.com/',
       pretendToBeVisual: true
   });

   [
       'self',
       'document',
       'Document',
       'Node',
       'Element',
       'HTMLElement',
       'DocumentFragment',
       'DOMParser',
       'XMLSerializer',
       'NodeFilter',
       'InputEvent',
       'CustomEvent'
   ].forEach(key => (getGlobal()[key] = window[key]));
}
Since:
  • 1.6.0
Throws:

not supported environment

Type
Error
Returns:
Type
object

# (static) getDocumentFragmentFromString() → {DocumentFragment}

this method fetches the document object

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

Alternatively, you can also integrate this function individually.

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

in nodejs this functionality can be performed with jsdom.

import {JSDOM} from "jsdom"
if (typeof window !== "object") {
   const {window} = new JSDOM('', {
       url: 'http://example.com/',
       pretendToBeVisual: true
   });

   [
       'self',
       'document',
       'Document',
       'Node',
       'Element',
       'HTMLElement',
       'DocumentFragment',
       'DOMParser',
       'XMLSerializer',
       'NodeFilter',
       'InputEvent',
       'CustomEvent'
   ].forEach(key => (getGlobal()[key] = window[key]));
}
Since:
  • 1.6.0
Throws:
  • not supported environment

    Type
    Error
  • value is not a string

    Type
    TypeError
Returns:
Type
DocumentFragment

# (static) getDocumentTheme() → {Theme}

The theming used in the document can be defined via the html-tag. The theming is specified via the attribute data-monster-theme-name.

As name for a theme all characters are valid, which are also allowed for a HTMLElement-ID.

<html data-monster-theme-name="my-theme">

the default theme name is monster.

Since:
  • 1.7.0
Returns:
Type
Theme

# (static) getLinkedObjects(element, symbol) → {Iterator}

The ObjectLink can be used to attach objects to HTMLElements. The elements are kept in a set under a unique symbol and can be read via an iterator {@see getLinkedObjects}.

In addition, elements with an objectLink receive the attribute data-monster-objectlink.

With the method {@see addToObjectLink} the objects can be added.

You can call the method via the monster namespace new Monster.DOM.getLinkedObjects().

<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/monster.js';
Monster.DOM.getLinkedObjects();
</script>

Alternatively, you can also integrate this function individually.

<script type="module">
import {getLinkedObjects} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/modules/dom/attributes.js';
getLinkedObjects();
</script>
Parameters:
Name Type Description
element HTMLElement
symbol Symbol
Since:
  • 1.9.0
Throws:

there is no object link for symbol

Type
Error
Returns:
Type
Iterator

# (static) getLocaleOfDocument()

Tries to determine the locale used

With this function you can read the language version set by the document. For this the attribute lang in the html tag is read. If no attribute is set, en is used as default.

<html lang="en">

You can call the function via the monster namespace new Monster.DOM.getLocaleOfDocument().

<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/monster.js';
new Monster.DOM.getLocaleOfDocument()
</script>

Alternatively, you can also integrate this function individually.

<script type="module">
import {getLocaleOfDocument} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/modules/dom/locale.js';
new getLocaleOfDocument()
</script>
Since:
  • 1.13.0
Throws:
  • value is not a string

    Type
    TypeError
  • unsupported locale

    Type
    Error

# (static) getWindow() → {object}

this method fetches the window object

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

Alternatively, you can also integrate this function individually.

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

in nodejs this functionality can be performed with jsdom.

import {JSDOM} from "jsdom"
if (typeof window !== "object") {
   const {window} = new JSDOM('', {
       url: 'http://example.com/',
       pretendToBeVisual: true
   });

   getGlobal()['window']=window;

   [
       'self',
       'document',
       'Document',
       'Node',
       'Element',
       'HTMLElement',
       'DocumentFragment',
       'DOMParser',
       'XMLSerializer',
       'NodeFilter',
       'InputEvent',
       'CustomEvent'
   ].forEach(key => (getGlobal()[key] = window[key]));
}
Since:
  • 1.6.0
Throws:

not supported environment

Type
Error
Returns:
Type
object

You can call the method via the monster namespace new Monster.DOM.hasObjectLink().

<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/monster.js';
Monster.DOM.hasObjectLink();
</script>

Alternatively, you can also integrate this function individually.

<script type="module">
import {hasObjectLink} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/modules/dom/attributes.js';
hasObjectLink();
</script>
Parameters:
Name Type Description
element HTMLElement
symbol Symbol
Since:
  • 1.9.0
Returns:
Type
boolean

# (static) registerCustomElement(element) → {void}

This method registers a new element. The string returned by CustomElement.getTag() is used as the tag.

Parameters:
Name Type Description
element CustomElement
Since:
  • 1.7.0
Throws:

Failed to execute 'define' on 'CustomElementRegistry': is not a valid custom element name

Type
DOMException
Returns:
Type
void

# (static) removeAttributeToken(element, key, token) → {HTMLElement}

This function can be used to remove tokens from an attribute.

Tokens are always separated by a space.

You can call the method via the monster namespace new Monster.DOM.removeAttributeToken().

<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/monster.js';
Monster.DOM.removeAttributeToken();
</script>

Alternatively, you can also integrate this function individually.

<script type="module">
import {removeAttributeToken} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/modules/dom/attributes.js';
removeAttributeToken();
</script>
Parameters:
Name Type Description
element HTMLElement
key string
token string
Since:
  • 1.9.0
Returns:
Type
HTMLElement

You can call the method via the monster namespace new Monster.DOM.removeObjectLink().

<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/monster.js';
Monster.DOM.removeObjectLink();
</script>

Alternatively, you can also integrate this function individually.

<script type="module">
import {removeObjectLink} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/modules/dom/attributes.js';
removeObjectLink();
</script>
Parameters:
Name Type Description
element HTMLElement
symbol Symbol
Since:
  • 1.9.0
Returns:
Type
boolean

# (static) replaceAttributeToken(element, key, from, to) → {HTMLElement}

Tokens are always separated by a space.

You can call the method via the monster namespace new Monster.DOM.replaceAttributeToken().

<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/monster.js';
Monster.DOM.replaceAttributeToken();
</script>

Alternatively, you can also integrate this function individually.

<script type="module">
import {replaceAttributeToken} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/modules/dom/attributes.js';
replaceAttributeToken();
</script>
Parameters:
Name Type Description
element HTMLElement
key string
from string
to string
Since:
  • 1.9.0
Returns:
Type
HTMLElement

# (static) toggleAttributeToken(element, key, token) → {HTMLElement}

With this method tokens in an attribute can be switched on or off. For example, classes can be switched on and off in the elements class attribute.

Tokens are always separated by a space.

You can call the method via the monster namespace new Monster.DOM.toggleAttributeToken().

<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/monster.js';
Monster.DOM.toggleAttributeToken();
</script>

Alternatively, you can also integrate this function individually.

<script type="module">
import {toggleAttributeToken} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/modules/dom/attributes.js';
toggleAttributeToken();
</script>
Parameters:
Name Type Description
element HTMLElement
key string
token string
Since:
  • 1.9.0
Returns:
Type
HTMLElement