`for` attribute or the `out-of-order patching section` (asynchronous injection)

by Julien Roche

HTML

<h1>How to train your cat</h1>
<p>Set realistic goals and don't expect your cat to make a perfect cup of tea
on the first try.</p>
<aside>
  <p>Recommended reading:</p>
  <?start name="recommended">
  <blink>Wait we are here soon</blink>
  <?end>
</aside>
<p>...</p>
<p>Now sit back and enjoy your tea with your cat.</p>

CSS

.blink, blink {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

JavaScript

const templateToInject = `<template for="recommended">
  <ul>
    <li>Cat or butler, which is right for you?</li>
    <li>Rewarding good cat behavior</li>
    <li>Kettles considered harmful</li>
  </ul>
</template>`;

setTimeout(() => {
  const currentBody = document.body.innerHTML;
  const newBody = `${currentBody}${templateToInject}`
  const parsedDoc = Document.parseHTMLUnsafe(newBody);
  document.body.replaceWith(parsedDoc.body);
}, 3000);