ReactiveLazyComponent

Table of Contents

Description

The ReactiveLazyComponent class extends the LazyComponent class and provides additional functionality to automatically re-render the component when specified attributes change.

Basic Usage

Extend the ReactiveLazyComponent class to create a component that automatically re-renders when specified attributes change and only renders its content when it becomes visible in the viewport.

import ReactiveLazyComponent from 'kempo';
class MyReactiveLazyComponent extends ReactiveLazyComponent {
constructor(){
super();
// Your Constructor
}
static get renderOnChange(){
return ['my-attr'];
}
async render(force){
if(await super.render(force)){
// Your render logic
return true;
}
return false;
}
}
window.customElements.define('my-reactive-lazy-component', MyReactiveLazyComponent);

JavaScript Reference

Constructor

Extends LazyComponent
new ReactiveLazyComponent()

Requirements

Attributes

The ReactiveLazyComponent class does not introduce any new attributes beyond those provided by the LazyComponent class.

Methods

attributeChangedCallback(n, oV, nV): void

Overrides the attributeChangedCallback method to automatically re-render the component when specified attributes change.

Properties

static renderOnChange: Array

An array of attribute names that should trigger a re-render when they change. This property should be overridden in your component class.