在 HTML5 自定義標簽中實例化 Svelte 組件（無 Shadow DOM）

Question

我正在構建一個僅使用 JavaScript 使用的 Svelte 組件庫。 在稍后階段，其他 Svelte 應用程序也將作為附加選項。

我想避免使用 Svelte 的自定義元素功能，因為真正的 Web 組件及其 Shadow DOM 存在局限性。

目前該組件是這樣實例化的：

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

現在我想通過定義 HTLM5 自定義標簽來提供一種更優雅的方式，例如：

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

實現這個的好方法是什么？

Answer 1

找到它： github/svelte-tag npm/svelte-tag

查看底部附近 github 上的問題是克里斯沃德的回答。

它制作了一個自定義元素但沒有影子 DOM。 今天找到它並為我工作。