自定义元素的CSS属性未继承给子级 [英] CSS properties of custom element not inherited to children

问题描述

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

I'm working on an Angular 5 project and noticed some CSS properties are not inherited correctly from custom elements. For example, consider a custom component 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 元素.

However, browsers seem to not inherit those properties correctly down to the form and div elements.

• Firefox(59)正确继承了 opacity ，但似乎忽略了 max-height .
• Chrome(64)不会继承 opacity ，并且还完全忽略 max-height .

• Firefox (59) properly inherits opacity, but seems to ignore max-height.
• Chrome (64) doesn't inherit opacity, and also ignores max-height altogether.

我制作了 朋克演示了这个问题 .

I made a plunk demonstrating the issue.

关于自定义元素如何继承CSS属性是否有些曲解，还是仅仅是浏览器的错误?

Is there some twist about how custom elements inherit CSS properties, or are those just browser bugs?

推荐答案

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

Neither opacity nor max-height are inherited properties to begin with. I think this is simply due to the fact that your custom foo component is inline by default, so a max-height for example isn’t even allowed to apply.

添加

foo { display: block; }

或

foo { display: inline-block; }

并检查您得到了什么结果...

and check what result you get ...

这篇关于自定义元素的CSS属性未继承给子级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！