Component

Table of Contents

Description

Component is an Web Component (JS Class) from which all Kempo components are created, it handles the creation of the Shadow DOM from the shadowTemplate and shadowStyles, along with creating utility methods for creating attributes and methods.

Requirements

Constructor

Extends HTMLElement
super()
super(Object shadowOptions)

This class can not be instatiated directly, but rather should be extended, optionally passing in the shadowOptions.

import Component from 'kempo';
class MyComponent extends Component {
constructor(){
super();
// Your Constructor
}
}
window.customElements.define('my-component', MyComponent);

Attributes

rendered Boolean

A READ ONLY boolean that indicates if this element has been rendered.

Properties

shadowTemplate String

A string of HTML that is used to render the markup of the component. This should be overwritten in your component with your own markup, but make sure to use the super.shadowTemplate to get the default slot.

import Component from 'kempo';
class MyComponent extends Component {
/* Other things */
get shadowTemplate(){
return /*html*/`
${super.shadowTemplate}
<p>This is my component</p>
`
;
}
}
window.customElements.define('my-component', MyComponent);
shadowStyles String

A string of CSS that styles the Shadow DOM (from the shadowTemplate).

import Component from 'kempo';
class MyComponent extends Component {
/* Other things */
get shadowStyles(){
return /*css*/`
:host {
/* Style this element */
}
p {
/* Style Shadow DOM Elements */
}
`
;
}
}
window.customElements.define('my-component', MyComponent);

Methods

async render(Boolean force = false)

This method renders the Shadow DOM if it has not already been rendered, and sets the rendered attribute to true.

This should be overwritten in your component with your own function, but make sure to use the super.render(force) to render the Shadow DOM.

import Component from 'kempo';
class MyComponent extends Component {
async render(force){
if(await super.render(force)){
/* The Shadow DOM is ready, do your stuff here
This is often attaching event handlers to Shadow DOM elements
*/

return true;
}
return false;
}
}
window.customElements.define('my-component', MyComponent);
registerAttribute(String name, Any defaultValue = '')

This method creates an attribute (dash case), that can also be accessed as a member with camel case. This is typically done in the constructor.

import Component from 'kempo';
class MyComponent extends Component {
constructor(){
super();
this.registerAttribute('my-att', 'hello');
// this can now be accessed by using this.myAtt
}
}
window.customElements.define('my-component', MyComponent);
registerAttributes(Object attributes)

This is the same as registerAttribute, except it takes the attributes as key-value-pairs allowing you to register multiple attributes at once.

import Component from 'kempo';
class MyComponent extends Component {
constructor(){
super();
this.registerAttributes({
'myAttr1': 'value1',
'myAttr2': 'value2'
});
// this can now be accessed by using this.myAttr1 and this.myAttr2
}
}
window.customElements.define('my-component', MyComponent);
registerProp(String name, Any defaultValue)

This method creates a property. This is typically done in the constructor.

import Component from 'kempo';
class MyComponent extends Component {
constructor(){
super();
this.registerProp('myProp', ['foo', 'bar']);
// this can now be accessed by using this.myProp
}
}
window.customElements.define('my-component', MyComponent);
registerProps(Object properties)

This is the same as registerProp, except it takes the props as key-value-pairs allowing you to register multiple props at once.

import Component from 'kempo';
class MyComponent extends Component {
constructor(){
super();
this.registerProps({
myProp1: ['foo', 'bar'],
myProp2: 5
});
// these props can now be accessed by using this.myProp1 and this.myProp2
}
}
window.customElements.define('my-component', MyComponent);