Thanks for being patient while we implement your feedback to improve the developer experience.
Stencil Docs
JavaScript and Event Hooks
Rendering HTML with Ajax

Rendering HTML with Ajax

Stencil allows you to render dynamic components on the fly. For example, note this default code in templates/components/products/quick-view.html (note also this file name, which Handlebars will reference later in this example):

<div class="modal-body quickView">
    {{> components/products/product-view schema=false}}

To render a different template, you would instead reference that template’s file name. For example, assume that you want to substitute a custom template that you’ve named: templates/components/products/quicker-view.html.

This next code block is from the Stencil default theme’s /assets/js/theme/global/quick-view.js file. Note the quicker-view.html statements brought in to reference the new file name:

let $modal = $('#modal'),
  $modalContent = $('.modal-content', $modal),
  $modalOverlay = $('.loadingOverlay', $modal),
  modalModifierClasses = 'modal--large';
$('body').on('click', '.quickview', (event) => {
  let productId = $(event.currentTarget).data('product-id');
  // clear the modal
  // open modal
  $'reveal', 'open');
	//quicker-view.html statement, replacing the standard template's quick-view.html template
  utils.api.product.getById(productId, {template: 'products/quicker-view'}, function done(err, response) {
      return new ProductDetails($modalContent, context);