render components to target elements you don't have control over

a-readme.md

from a discord discussion with Rich Harris ❤️

bundle.js

import { SomeChart } from './components/SomeChart.html';
import { SomeOtherThing } from './components/SomeOtherThing.html';

const embeds = {
  'some-chart': SomeChart,
  'some-other-thing': SomeOtherThing
};

document.on('ready', () => {
  [...document.querySelectorAll('.interactive')].forEach(target => {
    const Component = embeds[target.dataset.embed];
    new Component({ target });
  });
});

the-webpage.html

<div class="interactive" data-embed="some-chart"></div>
<script src="path/to/bundle.js"></script>

<!-- later, in a separate embed (which ends up in the same big blob of HTML) -->
<div class="interactive" data-embed="some-other-thing"></div>
<script src="path/to/bundle.js"></script>