svelte - 将选定的 Svelte 组件编译为 CustomElements

Question

我正在尝试使用 Svelte 构建前端应用程序。我有许多组件应编译为自定义元素，以便我可以动态插入它们，即通过执行以下操作:

<script>
   let my_html_string = '<p>Hello from <my-customelem/> something something</p>';
</script>

<div>
   {@html my_html_string}
</div>

只要我在我的 rollup.config.js 文件中设置全局 customElement: true 就可以正常工作。

但是，这阻止了我使用例如svelte-router，因为它显然不会编译成自定义元素。

有没有一种方法可以配置 rollup 以选择性地将某些元素编译为自定义元素，同时保留基本应用程序(App.svelte、svelte-router Router、Link 等组件)作为标准 Svelte 组件？

---

更新(更多信息):

上面的组件是(例如)Page.svelte。 CustomElement.svelte 是应该编译为自定义元素的组件。

我正在根据说明使用 svelte-routing ( https://github.com/EmilTholin/svelte-routing )(没什么特别的)。

我的 rollup.config 是默认的 Svelte 模板版本(设置了 customElement: true)。

当我使用 customElement: true 进行编译时，出现“非法构造函数”错误(由于 svelte-routing Router 组件)；当我删除 customElement: true 时，我显然没有将 CustomElement 编译为自定义元素(因此无法从 HTML 字符串动态插入它)。

那么，有没有一种方法可以选择性地为自定义元素启用 customElement: true？

Answer 1

查看 this example .

还有 my StackOverflow question包含这样的例子。以下汇总配置允许您通过使用不同的文件扩展名来处理两种组件类型:*.svelte 用于 Svelte 组件，*.wc.svelte 用于 HTML5 自定义元素。

plugins: [
        ...

        /** Handle HTML5 Web Components **/
        svelte({
            include: /\.wc\.svelte$/,
            preprocess: sveltePreprocess({
                sourceMap: !production,
            }),
            compilerOptions: {
                customElement: true,
                // enable run-time checks when not in production
                dev: !production
            },
            // store CSS in JavaScript
            emitCss: false
        }),

        /** Handle Svelte Components **/
        svelte({
            exclude: /\.wc\.svelte$/,
            preprocess: sveltePreprocess({
                sourceMap: !production,
            }),
            compilerOptions: {
                customElement: false,
                // enable run-time checks when not in production
                dev: !production
            },
            // we'll extract any component CSS out into
            // a separate file - better for performance
            emitCss: true
        }),

        ...

我唯一的问题是，它会记录自定义元素的警告。