Как создать и стилизовать стройные 3 пользовательских элемента с вложенными компонентами?

Я пытаюсь создать custom-element (веб-компонент) в svelte 3. Я не могу найти ни одного способ стилизовать вложенные компоненты из css. Svelte удаляет стили перед тем, как внедрить их в <style> внутри ShadowDOM.

Проблема в том, что я хочу, чтобы в моем корневом элементе были вложенные компоненты. Например:

  • RootComponent (svelte custom-element)
    • (imports) FooComponent
    • (импорт) BarComponent

Как указано здесь: svelte-custom-element

Для всех компонентов, импортированных в custom-element, параметр компилятора должен быть установлен на <svelte:options tag="component-name" />.

При установке этого параметра вложенные компоненты работают должным образом и внедряются в корневой элемент ShadowDOM. Проблема в том, что styles, определенные во вложенных компонентах, не внедряются. Обходной путь для этой проблемы - внедрить их в корневой элемент <style> в качестве глобальных стилей в ShadowDom. (Не) к счастью, svelte автоматически удаляет все неиспользуемые стили во время компиляции, когда пользовательские элементы еще не существуют.

Моя цель - создать веб-компонент с помощью svelte, а затем использовать его вне svelte как собственный веб-компонент.

Вот REPL.

Пользовательские элементы на самом деле не работают в REPL, как пишет Conduitry:

Параметры компилятора в REPL фактически не влияют на выполняемый> код, а только на отображаемый код. Таким образом, включение customElement> не означает, что вы создаете и запускаете веб-компонент.

Так что это больше похоже на пример кода, чем на рабочий.

  1. Я хотел бы знать, есть ли другой способ создать стройный пользовательский элемент с вложенным компонентом и правильным стилем.
  2. Есть ли способ отключить удаление неиспользуемых css?

https://imgur.com/a/zZia566

с <div class="nested"> запускается Вложенный компонент, импортированный из Nested.svelte.

В элемент <style> должен быть введен класс .nested, но он удаляется компилятором Svelte.


svelte svelte-component web-component custom-element shadow-dom
person Buk1m    schedule 05.09.2019    source источник

Ответы (2)


arrow_upward
9
arrow_downward

Это связано с тем, что, когда включена опция customElement, каждый стиль в компоненте вставляется в shadowRoot пользовательского элемента.

class YourComponent extends SvelteElement {
        constructor(options) {
            super();

            this.shadowRoot.innerHTML = `<style>.foo{color:red;}</style>`;
// continues

Таким образом, чтобы появился style, вы должны использовать компонент svelte как настраиваемый элемент, а не как компонент svelte.

Ваш App.svelte должен быть таким, как показано ниже.

<script>
    import Foo from './Foo.svelte'
    import Bar from './Bar.svelte'
</script>
<svelte:options tag="web-component" />

<foo-component/>
<bar-component/>

Однако это не решает проблем, связанных с настраиваемым элементом.

  1. : глобальный селектор не преобразуется в настоящий глобальный селектор.

  2. Каждый вложенный компонент будет производить shadowRoot, тогда как в большинстве случаев вам понадобится только компонент верхнего уровня.

Ознакомьтесь с некоторыми проблемами из репозитория svelte, связанными с настраиваемыми элементами, ниже.

Похоже, что svelte еще не полностью поддерживает каскадирование стилей в настраиваемых элементах, это должно быть обработано в будущем.

Проверено в svelte v3.12.1.

person Moon    schedule 19.11.2019

arrow_upward
0
arrow_downward

Спасибо brunoalano за то, что прислали мне это: svelte-custom-element-template. Это решает проблему стиля с помощью настраиваемого скрипта сборки.

person Buk1m    schedule 26.10.2020