Simple PFElement Constructor with delayRender

simple-pfelement-constructor-delay-render.js

// the location of pfelement.js may be different if you're not building an element in the
// PatternFly elements repository
import PFElement from "../pfelement/pfelement.js";

class MySimplePfelement extends PFElement {
  constructor() {
    // make sure we call super() first with the class we're using
    // as the first argument
    
    // the second argument in super() is an object with delayRender: true
    // because we don't want the HTML template to be rendered immediately
    super(MySimplePfelement, { delayRender: true });
    
    this.data = {};
    this._fetchData();
  }
  
  _fetchData() {
    fetch("someapi.json")
      .then(res => res.json())
      .then(() => this._handleFetch);
  }
  
  _handleFetch(data) {
    this.data = data;
    
    // be sure to call this when you are ready for the HTML template
    // to be displayed in the shadow root
    // render() is a method on the PFElement class
    this.render();
  }
}