CustomElement

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 monster namespace new Monster.DOM.CustomElement().

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

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

the options attribute does not contain a valid json definition.

Type
Error
Example
// In the example the the user can use his own template by creating a template in the DOM with the ID `my-custom-element`.
// You can also specify a theme (for example `mytheme`), then it will search for the ID `my-custom-element-mytheme` and
// if not available for the ID `my-custom-element`.

class MyCustomElement extends CustomElement {

   static getTag() {
       return "my-custom-element"
   }

}

// ↦ <my-custom-element></my-custom-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|undefined}

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

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

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. someone called document.adoptNode(el)).

Since:
  • 1.7.0
Returns:
Type
void

# assembleMethodSymbol() → {CustomElement}

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

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

Since:
  • 1.7.0
Returns:
Type
void

# disconnectedCallback() → {void}

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

Parameters:
Name Type Description
path string
defaultValue *
Since:
  • 1.10.0
Returns:
Type
*

# initMethodSymbol() → {CustomElement}

Since:
  • 1.8.0
Returns:
Type
CustomElement