CSS 自定义元素的属性未继承给子元素

Question

我正在处理一个 Angular 5 项目并注意到一些 CSS 属性没有从自定义元素正确继承。例如，考虑一个自定义组件 foo:

@Component({
  selector: 'foo',
  template: `
    <form>inside form</form>
    <div>inside form</div>
    outside
  `,
})
export class FooComponent { }

现在，我想改变它的 opacity 和 max-height:

foo {
  opacity: 0.5;
  max-height: 0;
  overflow: hidden;
}

但是，浏览器似乎无法正确继承这些属性，直至 form 和 div 元素。

Firefox (59) 正确地继承了 opacity，但似乎忽略了 max-height。
Chrome (64) 不继承 opacity，也完全忽略 max-height。

我做了一个plunk demonstrating the issue.

自定义元素继承 CSS 属性的方式有什么不同，还是只是浏览器错误？

Answer 1

opacity 和 max-height 都不是继承属性。我认为这仅仅是因为您的自定义 foo 组件默认情况下是内联的，因此甚至不允许应用 max-height。

添加

foo { display: block; }

或

foo { display: inline-block; }

并检查您得到的结果...

Answer 2

尝试分别添加标签以在必要的标签中应用 css。 Ej:

    foo.opacity-test form {
       opacity: 0.5;
    }

CSS 自定义元素的属性未继承给子元素

CSS properties of custom element not inherited to children

html

css

custom-element

angular