I'm building a Svelte component library to be consumed using JavaScript only. At a later stage also by other Svelte applications as an additional option.

I want to avoid Svelte's custom element feature, since there are limitations with true Web Components and its Shadow DOM.

Currently the component is instantiated like this:

<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>

Now I would like to provide a more elegant way by defining a HTLM5 custom tag like:

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

What is a good way to implement this?