Monster.Components.Form. Template

This CustomElement monster-template reloads a content and adds it to the ShadowRoot. The content is set to not visible,

You can create this control either by specifying the HTML tag <monster-template /> directly in the HTML or using Javascript via the document.createElement('monster-template'); method.

<monster-template></monster-template>

Or you can create this CustomControl directly in Javascript:

import {Template} from 'https://cdn.jsdelivr.net/npm/@schukai/[email protected]/dist/modules/template.js';
document.createElement('monster-template');

The content will not be loaded until this element is visible. If the element is invisible again and becomes visible again, the content is reloaded as well. you can disable this behavior by setting reload=onshow. *

Constructor

new Template()

A template control

Since
  • 1.11.0

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

defaults

This method is called internal and should not be called directly.

This method is called internal and should not be called directly.

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.

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
NameTypeDescription
templatesObject

Template definitions

Properties
NameTypeDescription
mainstring

Main template

urlstring
reloadstring

currently the only value defined is onshow. Currently the only value defined is onshow. this removes the IntersectionObserver. this means that the content is only loaded once. reloading of the content does not occur.

processorsArray.<Monster.Components.Form.Processor>
fetchObject

Fetch see Using Fetch mozilla.org

Properties
NameTypeDefaultDescription
redirectStringerror
methodStringGET
modeStringsame-origin
credentialsStringsame-origin
headersObject{"accept":"text/html"}}

Methods

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

This method is called internal and should not be called directly.

This method is called internal and should not be called directly.

Returns:
Type: 
Array.<CSSStyleSheet>

(static) getTag() → {string}

This method is called internal and should not be called directly.

This method is called internal and should not be called directly.

Returns:
Type: 
string

assembleMethodSymbol() → {Monster.Components.Form.Form}

This method is called internal and should not be called directly.

This method is called internal and should not be called directly.

Throws:
  • missing default slot

    Type
    Error
  • no shadow-root is defined

    Type
    Error
  • missing url

    Type
    Error
  • we won't be able to read the data

    Type
    Error
  • request failed

    Type
    Error
  • not found

    Type
    Error
  • undefined status or type

    Type
    Error

fetch(url)

load content from url

It is important to know that with this function the loading is executed directly.

load content from url

It is important to know that with this function the loading is executed directly. it is loaded as well when the element is not visible.

Parameters:
NameTypeDescription
urlstring | undefined

initMethodSymbol()