Component Based Micro-Frontend

Product.js

class Product extends MicroFrontend {
  static get productDetails() {
    return {
      '1': {
        name: 'Cat Table',
        img: 'img/product/cat-table.jpg'
      },
      '2': {
        name: 'Dog House Sofa',
        img: 'img/product/doghousesofa.jpg'
      },
    }
  }
  getProductDetails() {
    var urlParams = new URLSearchParams(window.location.search);
    const productId = urlParams.get('productId');
    return this.constructor.productDetails[productId];
  }
  render() {
    const product = this.getProductDetails();
    return `	<!-- Page -->
    <div class="page-area product-page spad">
      <div class="container">
        <div class="row">
          <div class="col-lg-6">
            <figure>
              <img class="product-big-img" src="${product.img}" alt="">`
  }
  selectProductColor(color) {}

  selectProductSize(size) {}
 
  addToCart() {
    // delegate call to MicroFrontend Cart.addToCart function
  }
  
}