Monster.DOM. CustomElement

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

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.

You can create the object via the function document.createElement().

Interaction

Styling

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

To prevent the custom elements from being displayed and flickering until the control is registered, it is recommended to create a css directive.

In the simplest case, you can simply hide the control.

<style>

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

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

</style>

Alternatively you can also display a loader

my-custom-element:not(:defined) {
           display: flex;
           box-shadow: 0 4px 10px 0 rgba(33, 33, 33, 0.15);
           border-radius: 4px;
           height: 200px;
           position: relative;
           overflow: hidden;
       }

my-custom-element:not(:defined)::before {
           content: '';
           display: block;
           position: absolute;
           left: -150px;
           top: 0;
           height: 100%;
           width: 150px;
           background: linear-gradient(to right, transparent 0%, #E8E8E8 50%, transparent 100%);
           animation: load 1s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
       }

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
See
Throws:

the options attribute does not contain a valid json definition.

Type
Error
Example
import {getDocumentTheme} from '@schukai/monster/source/dom/theme.mjs';

const theme = getDocumentTheme();
console.log(theme.getName());
// ↦ monster

Extends

Members

(static) observedAttributes

This method determines which attributes are to be monitored by attributeChangedCallback().

This method determines which attributes are to be monitored by attributeChangedCallback().

Since
  • 1.15.0

defaults

Derived classes can override and extend this method as follows.

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.

Properties
NameTypeDefaultDescription
disabledbooleanfalse

Object The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form.

shadowModestringopen

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

delegatesFocusBooleantrue

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.

templatesObject

Templates

Properties
NameTypeDescription
mainstring

Main template

Since
  • 1.8.0
See

Methods

(static) getCSSStyleSheet() → {CSSStyleSheet|Array.<CSSStyleSheet>|string|undefined}

At this point a 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];
;
Returns:
Type: 
CSSStyleSheet | Array.<CSSStyleSheet> | string | undefined

(static) getTag() → {string}

There is no check on the name by this class.

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

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

Since
  • 1.7.0
Returns:
Type: 
void

assembleMethodSymbol() → {CustomElement}

Is called once when the object is included in the DOM for the first time.

Is called once when the object is included in the DOM for the first time.

Since
  • 1.8.0
Returns:
Type: 
CustomElement

attachObserver(observer) → {CustomElement}

attach a new observer

.

attach a new observer

Parameters:
NameTypeDescription
observerObserver
Returns:
Type: 
CustomElement

attributeChangedCallback(attrName, oldVal, newVal) → {void}

Called when an observed attribute has been added, removed, updated, or replaced.

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:
NameTypeDescription
attrNamestring
oldValstring
newValstring
Since
  • 1.15.0
Returns:
Type: 
void

connectedCallback() → {void}

Called every time the element is inserted into the DOM.

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
Returns:
Type: 
void

containsObserver(observer) → {ProxyObserver}

Parameters:
NameTypeDescription
observerObserver
Returns:
Type: 
ProxyObserver

detachObserver(observer) → {CustomElement}

detach a observer

.

detach a observer

Parameters:
NameTypeDescription
observerObserver
Returns:
Type: 
CustomElement

disconnectedCallback() → {void}

Called every time the element is removed from the DOM.

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

Since
  • 1.7.0
Returns:
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

Parameters:
NameTypeDescription
pathstring
defaultValue*
Since
  • 1.10.0
Returns:
Type: 
*

hasNode(node) → {boolean}

Parameters:
NameTypeDescription
nodeNode
Since
  • 1.19.0
Throws:

value is not an instance of

Type
TypeError
Returns:
Type: 
boolean

initMethodSymbol() → {CustomElement}

Is called once via the constructor

.

Is called once via the constructor

Since
  • 1.8.0
Returns:
Type: 
CustomElement

setOption(path, value) → {CustomElement}

Set option and inform elements

.

Set option and inform elements

Parameters:
NameTypeDescription
pathstring
value*
Since
  • 1.14.0
Returns:
Type: 
CustomElement

setOptions(options) → {CustomElement}

Parameters:
NameTypeDescription
optionsstring | object
Since
  • 1.15.0
Returns:
Type: 
CustomElement