相关疑难解决方法(0)

我有一个父组件:

<parent></parent>

我想用子组件填充这个组:

<parent>
  <child></child>
  <child></child>
  <child></child>
</parent>

父模板:

<div class="parent">
  <!-- Children goes here -->
  <ng-content></ng-content>
</div>

儿童模板:

<div class="child">Test</div>

由于parent和child是两个单独的组件,他们的风格被锁定在他们自己的范围.

在我的父组件中,我尝试过:

.parent .child {
  // Styles for child
}

但.child样式没有应用于child组件.

我尝试使用styleUrls将parent样式表包含在child组件中以解决范围问题:

// child.component.ts
styleUrls: [
  './parent.component.css',
  './child.component.css',
]

但这并没有帮助,也尝试了另一种方式,即取出child样式表,parent但这也无济于事.

那么如何设置包含在父组件中的子组件的样式？

考虑一下,我使用Shadow DOM隐藏其内部div-soup和布局的元素很少.

即使是艰难的,它们也是不同的,它们共享相同的CSS样式表,因为它们使用的是相同的元素集,这些元素应该以一致的方式进行样式化.例如,这可以是CSS框架(引导程序).

问题是这个样式表非常大.

在许多Shadow Roots(在SD V1中)之间分享如此大样式表的最有效方法是什么？