Есть ли ограничения на компиляцию компонентов Svelte как пользовательских элементов? Например, можем ли мы вкладывать компоненты? И заполнить слоты в этих вложенных компонентах?
У меня проблемы с использованием компонента Svelte в качестве настраиваемого элемента в моем старом приложении Vue.
В этом упрощенном примере у меня есть компоненты Select и Modal: https://svelte.dev/repl/4d4ad853f8a14c6aa27f6baf33751eb8?version=3.6.4
Затем я компилирую их с помощью стандартного rollup.config.js:
export default {
input: "src/components.js",
output: [
// ...
{ file: "dist/index.min.js", format: "umd", name }
],
plugins: [
svelte({
dev: !production,
customElement: true,
// ...
}),
resolve(),
commonjs(),
!production && livereload("public"),
production && terser()
],
// ...
};
Затем я перехожу к использованию настраиваемых элементов. При щелчке по <conversational-select> я получаю разметку следующего вида:
<conversational-select label="Domains" firstvaluelabel="All Domains">
<!-- shadow-root -->
<style>...</style>
<span class="select" >
<div class="select-value">Governance Board</div>
<div class="select-label" ></div>
</span>
<!-- The below div is the appropriate markup for Modal but the style isn't inlined and isn't slotted.
<!-- maybe because it didn't append as <sk-modal>? -->
<div ><slot></slot></div>
</conversational-select>
«Модальный» - это своего рода рендеринг. Но он не заполняет слот span .chips. Не встраивает стили, как это делает conversational-select. Похоже, что не прикрепляет свои собственные прослушиватели событий. Но, похоже, создает переход затухания благодаря директиве Svelte transition:fade.
Я могу воспроизвести это с помощью ванильного html файла, так что это не вина Vue.
Я нарушаю какое-то известное правило с пользовательскими элементами, сталкиваюсь с ограничениями компиляции пользовательских элементов Svelte, или просто где-то ошибаюсь?
