Template

A template control

Import

import { Template } from "@schukai/monster/source/components/form/template.mjs";

Source

View source code

Package

@schukai/monster

Since

1.11.0

Introduction

This is a versatile web component. More than just a simple UI element, this component serves as a key element for enhancing interactivity and engagement within various web applications. Whether you are developing a basic website or a complex enterprise-level application, this component is designed to improve user interaction and satisfaction.

Key Features

Dynamic interaction: Users can interact with content dynamically, making the web experience more intuitive and user-centric.
Customizable appearance: Customize the appearance of the component to match the design of your brand or application, ensuring visual consistency.
Accessibility: Designed with accessibility in mind to ensure that all users have a seamless experience, regardless of their browsing environment.
Visual feedback effect: Provides subtle touch feedback to enhance user interaction, making actions more responsive and engaging.
Programmatic Control: Offers methods such as trigger, focus, and deactivate, allowing developers to control the component's behavior programmatically and offering greater flexibility.

Improving the user experience

This component goes beyond its traditional functionality to offer an enhanced and interactive user experience. The combination of visual feedback effects and dynamic interaction with content is not only visually appealing, but also provides clear and responsive feedback to user actions, making the web environment more intuitive and user-friendly.

These improvements are supported by user studies that demonstrate a positive impact on user engagement and satisfaction.

Efficiency in the development process

Integrating this component into your development process is straightforward. Its compatibility with standard web technologies and ease of customization ensure seamless integration with your existing tools and libraries. Whether you're working on a small project or a large-scale application, the modular design of this component guarantees easy integration, streamlining your development process and enhancing productivity.

Template Simple

In this example, a tag is inserted and a URL is specified. This ensures that the content is reloaded and integrated into the shadow root of the component. This has the advantage that the style is protected.

Javascript

import '@schukai/monster/source/components/form/template.mjs';

HTML

<monster-template data-monster-option-url="/assets/examples/template-content.html">
</monster-template>

Stylesheet

/** no additional stylesheet is defined **/

Template With Default

In this example, a non-existing URL is entered. Therefore, the default text is displayed. The text is also displayed if the reload takes a long time, for example.

This is the default!

Javascript

import '@schukai/monster/source/components/form/template.mjs';

HTML

<monster-template data-monster-option-url="/assets/examples/template-not-found.html">
    <p slot="default">This is the default!</p>
</monster-template>

Stylesheet

/** no additional stylesheet is defined **/

Template With Processor

A preprocessor is a simple JavaScript object with two properties: `source` and `destination`. Both are CSS selectors that are resolved using the `querySelector` function.

source looks for the content in the loaded file.
destination searches first in the `document` if specified. If nothing is found there, it looks in the Shadow Root of the template itself. If `destination` is empty, the content from `source` is always inserted into the template.

Javascript

import '@schukai/monster/source/components/form/template.mjs';

const template = document.querySelector("monster-template");
const processor = {
    source: "[data-monster-role=content]",
    destination: null,
}
template.setOption("processors", [processor]);

HTML

<monster-template
        data-monster-option-url="/assets/examples/template-content2.html">
</monster-template>

Stylesheet

/** no additional stylesheet is defined **/

Template Onshow

In this example, the content is loaded only once. In the other examples, the content is displayed every time it is made visible.

Javascript

import '@schukai/monster/source/components/form/template.mjs';

HTML

<monster-template
        data-monster-option-reload="onshow"
        data-monster-option-url="/assets/examples/template-content.html">
</monster-template>

Stylesheet

/** no additional stylesheet is defined **/

Component Design

This component is built using the Shadow DOM, which allows it to encapsulate its internal structure and styling. By using a shadow root, the component's internal elements are isolated from the rest of the webpage, ensuring that external styles or scripts cannot accidentally modify its internal layout or behavior.

Shadow DOM and Accessibility

Since the component is encapsulated within a shadow root, direct access to its internal elements is restricted. This means that developers cannot manipulate or style these elements from outside the component. The Shadow DOM helps maintain consistency in the design and behavior of the component by preventing external interference.

Customizing Through Exported Parts

While the Shadow DOM restricts direct access to the component's internal structure, customization is still possible through exported parts. Specific parts of the component are made accessible for styling by being explicitly marked for export. These exported parts can be targeted and customized using CSS, allowing you to modify the appearance of the component without compromising its encapsulation.

Available Part Attributes

control: This part represents the entire control area of the slider, including navigation buttons and thumbnails. Use this to style the general layout and background of the control panel.

Below is an example of how to use CSS part attributes to customize different parts of the Control.


monster-component::part(control) {
    background-color: #f0f0f0;
    padding: 10px;
}

Explanation of the Example

monster-slider::part(control): Styles the entire control panel, giving it a light background color and some padding.

Accessibility

Accessibility is a key consideration in the design of this component. By following best practices for web accessibility, the component ensures that users of all abilities can interact with it effectively. This includes support for keyboard navigation, screen readers, and other assistive technologies to provide an inclusive user experience.

HTML Structure

<monster-template></monster-template>

JavaScript Initialization

const element = document.createElement('monster-template');
document.body.appendChild(element);

Exported

Template

Derived from

CustomElement

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the CustomElement.

Option

Type

Default

Description

templates

object

Template definitions

templates.main

string

undefined

Main template

string

url=undefined

reload

string

undefined

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

object[]

processors

fetch

object

Fetch [see Using Fetch mozilla.org](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)

string

fetch.redirect=error

string

fetch.method=GET

string

fetch.mode=same-origin

string

fetch.credentials=same-origin

object

fetch.headers={"accept":"text/html"}}

since
deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the CustomElement.

data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the CustomElement.

Behavioral methods

fetch(url)

Parameters

url {string|undefined}: url

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.

Static methods

[instanceSymbol]()2.1.0

Returns

{symbol}

This method is called by the instanceof operator.

getCSSStyleSheet()

Returns

{CSSStyleSheet[]}

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

getTag()

Returns

{string}

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

observedAttributes()

Returns

{string[]}

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

Lifecycle methods

Lifecycle methods are called by the environment and are usually not intended to be called directly.

[assembleMethodSymbol]()

Returns

{void}

Throws

{Error} missing default slot
{Error} no shadow-root is defined
{Error} missing url
{Error} we won't be able to read the data
{Error} request failed
{Error} not found
{Error} undefined status or type

Events

monster-fetched

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

[initMethodSymbol]()

Events

The component emits the following events:

monster-fetched
monster-fetched

For more information on how to handle events, see the mdn documentation.

The current width of the area is too small to display the content correctly.