Question

以下是Angular guide关于样式范围和继承的内容：

@Component元数据中指定的样式仅适用于该组件的模板。它们不是嵌套内的任何组件所继承的 模板或投射到组件中的任何内容

如果需要在嵌套树中向下传播样式，建议用户明确

使用/ deep /刺穿阴影的后代组合器强制样式通过子组件树向下进入所有子组件视图。

// For example, this should make all h3 elements down the nesting-tree italic: :host /deep/ h3 { font-style: italic; }

让我们看一下这个示例设置：

app.component.ts

@Component({ selector: 'app-root', template: ` <div class="my-container"> <app-hello></app-hello> // <-- a nested component This is local txt in app component </div> `, styles: ['.my-container { color: red; }'] }) export class AppComponent {}

hello.component.ts

@Component({ selector: 'app-hello', template: `<h1>Hello Component!</h1>` }) export class HelloComponent {}

预期：app-component中的文本为红色，hello-component中的文本为黑色

已观察：两个文本均为红色。 为什么？

Stackblitz中的演示

Answer 1

在您的示例中，这只是基本的CSS继承：您说div的颜色是红色，并且没有为该div的子元素明确指定任何其他颜色。因此，您的子组件当然将带有红色文本。这只是CSS的正常行为。

现在说您将h1添加到父元素，并添加一条规则以将其颜色更改为绿色。

template: `
  <div class="my-container">
  <h1>hellllooooo</h1>
    <app-hello></app-hello>
    This is local txt in app component
  </div>`,
 styles: ['.my-container { color: red; } h1 {color: green}']

在这种情况下，来自父级的h1将为绿色，但是此规则不会泄漏给子级的h1，后者仍将是继承的（在您的示例中为红色）。

这正是您所引用的含义

@Component元数据中指定的样式仅适用于该组件的模板。它们不会被模板中嵌套的任何组件所继承，也不会被投影到该组件中的任何内容所继承

Stackblitz demo

编辑：创建了另一个演示，降级了/deep

parent.ts

@Component({
  selector: 'app-root',
  template: `
        <app-hello></app-hello>
      <div class=container2>Text inside container2 div in parent - green</div>
  `,
  styles: ['.container2 {color: green}']
})

孩子

@Component({
  selector: 'app-hello',
  template: `
  <div class=container2>Text inside container2 div in child </div>`,

})

按原样，子元素的内容将为黑色，而不是绿色。父样式不会泄漏。现在，您将父样式修改为

styles: ['/deep/ .container2 {color: green}']

然后子div中的颜色将变为绿色。

2nd stackblitz demo

Answer 2

意味着样式的传播以这种方式工作。

如果在父组件中定义了类.my-class {...}，则阶梯可以传播到子级：

通过CSS继承（例如可以继承color属性）
如果父级中的样式定义被明确标记为对子级“可见”，例如通过 :host /deep/ .my-class { ... }

要点：影子DOM不会停止CSS继承（p.1），它会停止类命名传播，可以在（p.2）中启用

Stackblitz中的演示

Angular：为什么彩色CSS属性设置会向下传播到嵌套组件？

2 个答案: