Почему вложенный компонент не отображается как настраиваемый элемент с возможностью слотов? - PullRequest
0 голосов
/ 05 июля 2019

Существуют ли ограничения для компиляции компонентов 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, или просто где-то ошибаюсь?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...