CustomControl

Monster.DOM. CustomControl

To define a new HTML control 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.

This control uses attachInternals() to integrate the control into a form. If the target environment does not support this method, the polyfill can be used.

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

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

Constructor

# new CustomControl()

A base class for customcontrols based on CustomElement

IMPORTANT: CustomControls instances are not created via the constructor, but either via a tag in the HTML or via document.createElement().

Since:
  • 1.14.0
Throws:

the ElementInternals is not supported and a polyfill is necessary

Type
Error

Members

# (static) formAssociated

Since:
  • 1.14.0

# (static) observedAttributes

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.

get defaults() {
   return extends{}, super.defaults, {
       myValue:true
   });
}
Since:
  • 1.14.0

# form

This is a method of internal api

Since:
  • 1.14.0

# labels

This is a method of internal api

Since:
  • 1.14.0

# name

This is a method of internal api

# states

This is a method of internal api

Since:
  • 1.14.0

# type

This is a method of internal api

# validationMessage

This is a method of internal api

Since:
  • 1.14.0

# validity

This is a method of internal api

# value

Must be overridden by a derived class and return the value of the control.

This is a method of internal api

Since:
  • 1.14.0

# value

Must be overridden by a derived class and return the value of the control.

This is a method of internal api

Since:
  • 1.14.0

# willValidate

This is a method of internal api

Since:
  • 1.14.0

Methods

# checkValidity() → {boolean}

This is a method of internal api

Since:
  • 1.14.0
Throws:
  • NotSupportedError

    Type
    DOMException
  • the ElementInternals is not supported and a polyfill is necessary

    Type
    Error
Returns:
Type
boolean

# reportValidity() → {boolean}

This is a method of internal api

Since:
  • 1.14.0
Throws:
  • the ElementInternals is not supported and a polyfill is necessary

    Type
    Error
  • NotSupportedError

    Type
    DOMException
Returns:
Type
boolean

# setFormValue(value, state) → {undefined}

This is a method of internal api

// Use the control's name as the base name for submitted data
const n = this.getAttribute('name');
const entries = new FormData();
entries.append(n + '-first-name', this.firstName_);
entries.append(n + '-last-name', this.lastName_);
this.setFormValue(entries);
Parameters:
Name Type Description
value File | string | FormData
state File | string | FormData
Since:
  • 1.14.0
Throws:
  • NotSupportedError

    Type
    DOMException
  • the ElementInternals is not supported and a polyfill is necessary

    Type
    Error
Returns:
Type
undefined

# setValidity(flags, message, anchor) → {undefined}

Parameters:
Name Type Description
flags object
message string | undefined
anchor HTMLElement
Since:
  • 1.14.0
Throws:
  • NotSupportedError

    Type
    DOMException
  • the ElementInternals is not supported and a polyfill is necessary

    Type
    Error
Returns:
Type
undefined