相关疑难解决方法(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但这也无济于事.

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

我想从自定义元素的内容中提取第一段(作为摘要).我希望以下工作:

<polymer-element name="x-thing" noscript>
  <template>
    <segment class="summary">
      <content select="p:first-child"></content>
    </segment>
    <segment>
      <content></content>
    </segment>
  </template>
</polymer-element>

不幸的是,<content select="p:first-child">似乎没有任何匹配:(

这是一个相应的codepen.