const template = document.querySelector<HTMLTemplateElement>('#template')!;
const temp = template.content;

const app = document.querySelector('#app')!;
app.append(temp);

const fragment = document.createDocumentFragment();
const colors = ['red', 'green', 'blue'];

colors.forEach((color) => {
  const shadowHost = document.createElement('div');
  const shadow = shadowHost.attachShadow({ mode: 'open' });
  shadow.innerHTML = `
    <p>Make me ${color}</p>
    <style>
      p {
        color: ${color}
      }
    </style>
  `;
  fragment.append(shadowHost);
});

app.append(fragment);