Estoy creando una biblioteca de componentes Svelte para consumir solo con JavaScript. En una etapa posterior también por otras aplicaciones Svelte como opción adicional.

Quiero evitar la función de elementos personalizados de Svelte, ya que existen limitaciones con los componentes web verdaderos y su Shadow DOM.

Actualmente, el componente se instancia así:

 <div id="my-component"></div> <script> document.addEventListener("DOMContentLoaded", function (event) { new MySvelteComponent({ target: document.getElementById("my-component"), props: { firstProp: true, secondProp: "some value" } }); }); </script>

Ahora me gustaría proporcionar una forma más elegante definiendo una etiqueta personalizada HTLM5 como:

 <my-component firstProp="true" secondProp="some value">

¿Cuál es una buena manera de implementar esto?