JSFiddle - React, Tailwind, and code Playground

by msfrisbie

HTML

<div id="foo"></div>

<template id="bar">
  <script>console.log('Template script executed');</script>
</template>

CSS

p {
  background-color: green;
  height: 100px;
  width: 100px;
}

JavaScript

const fooElement = document.querySelector('#foo');
const barTemplate = document.querySelector('#bar');
const barFragment = barTemplate.content;

console.log('About to add template');

fooElement.appendChild(barFragment);

console.log('Added template');

/* console.log(document.body.innerHTML); */
// <div id="foo">
//   <p></p>
//   <p></p>
//   <p></p>
// </div>
// <tempate id="bar"></template>