1. In the app head, invoke component-interop
<![CDATA[<script src="../component-interop.js"
data-stage="auto" // local on localhost, CDN when deployed
data-manifest="sol-components.manifest.json pod-os.manifest.json" // import Sol-Components' manifest
data-components="@pod-os/elements" // don't import Sol-Components' components
data-attributes="data-handler" // opt in to Sol-Components' data-handler attribute
></script>]]>
2. In the app body, add the data-handler and attributes the component needs to any element
<![CDATA[<pos-app><div id="pos-photos">
<button data-handler="pos-image"
data-src="https://timbl.solidcommunity.net/profile/TBL%20by%20coz%20Solid%20purple.png"
data-alt="Tim Berners-Lee">Tim</button>
<button data-handler="pos-image"
data-src="https://angelo.veltens.org/profile/me.jpg"
data-alt="Angelo Veltens">Angelo</button>
<button data-handler="pos-image"
data-src="https://virginiabalseiro.com/assets/images/profile.jpg"
data-alt="Virginia Balseiro">Virginia</button>
</div><div id="pos-pane"></div></pos-app>
]]>
3. Listen for 'interop:activate', you're done!
<![CDATA[<script>
document.addEventListener('interop:activate', function (e) {
if (e.detail.handler !== 'pos-image') return;
document.getElementById('pos-pane').replaceChildren(e.detail.element); // that's the whole job
});
</script>]]>