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属性未继承到子元素

2 个答案: