Abstract hlx markup transformation

[alexcarol]

We're currently doing DOM transformation to go from helix-generated html to a custom component, so that we can both use custom and third-party webcomponents.

Similar approach:

/**
 * Translates a block.
 * @param {Element} block The block element
 */
function translateBlock(block) {
  const blockName = block.classList[0];
  if (blockName) {
    // eslint-disable-next-line no-console
    console.log('in_block', block);
    const { dataset, classList, innerHTML } = block;
    classList.add('block');
    dataset.blockName = blockName;
    dataset.blockStatus = 'initialized';

    const brick = buildBrick(blockName, innerHTML, dataset, [...classList]);
    // eslint-disable-next-line no-console
    console.log('out_brick', brick);
    block.replaceWith(brick);
    return brick;
  }
  return null;
}

https://github.com/dicagno/aem-boilerplate/blob/e22b76fb94d44405273b6d1fca78222050ac6e39/scripts/aem.js#L695-L712