Существуют ли ограничения для компиляции компонентов 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 .chip
с. Не встроенные стили, как conversational-select
. Кажется, не прикрепляет своих собственных слушателей событий. Но похоже, что он создает переход затухания благодаря директиве Svelte transition:fade
.
Я могу воспроизвести это с помощью ванильного HTML-файла, так что это не вина Вью.
Я нарушаю какое-то известное правило с пользовательскими элементами, сталкиваюсь с ограничениями компиляции пользовательских элементов Svelte, или просто где-то ошибаюсь?