VueJS Nest WebComponents和组件-样式

Question

我正在开发一个使用Vue 3构建的项目，该项目使用SigleSpa加载子应用程序，这些子应用程序又加载了Web组件（--target wc）。如您所见，我们正在尝试分离UI组件。当我到达Web组件级别时，我遇到的问题是样式。

有4个项目

• 仪表板（主机应用程序，使用SingleSpa挂载子应用程序）
• 详细信息（通过SingleSpa加载子应用程序）
• 历史记录（WebComponent --target wc包含ListContainer和ListItem）
• CommonUi（WebComponent --target wc包含CollapsibleContainer）

历史记录将ListItems加载并绑定到包装在CollapsibleContainer中的ListContainer内部，DOM看起来像这样

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

我遇到的问题是，在.vue组件中为ListItem定义的样式（如果需要的话，使用scss）在CollapsibleContainer中时不适用。

当ListItem在CollapsibleContainer（Web组件）内部呈现时，如何将样式应用于ListItem？