VueJS Nest Веб-компоненты и компоненты - стилизация - PullRequest
Новая
       26

VueJS Nest Веб-компоненты и компоненты - стилизация

0 голосов
/ 14 марта 2019

Я работаю над проектом, созданным с использованием Vue 3, который использует SigleSpa для загрузки дочерних приложений, которые в свою очередь загружают веб-компоненты (--target wc). Как видите, мы пытаемся отделить компоненты пользовательского интерфейса. У меня проблема со стилем, когда я добираюсь до уровня веб-компонента.

Есть 4 проекта

  • Панель инструментов (хост-приложение, использует SingleSpa для монтирования дочернего приложения)
  • Подробности (дочернее приложение, загруженное через SingleSpa)
  • История (WebComponent --target wc содержит ListContainer и ListItem)
  • CommonUi (WebComponent --target wc содержит CollapsibleContainer)

История загружает и связывает ListItems внутри ListContainer, который обернут в CollapsibleContainer, DOM выглядит так 

  - Dashboard
    - Details
       - History
         - CollapsibleContainer
           - ListContainer
              - ListItem
              - ListItem
              - ...

Проблема, с которой я столкнулся, заключается в том, что стили, определенные для ListItem внутри компонента .vue (с использованием scss, если это имеет значение), не применяются, когда они находятся внутри CollapsibleContainer.

Как применить стили к ListItem, когда он отображается внутри CollapsibleContainer (веб-компонент)?

...