In my Angular 5 project, I've come across an issue where CSS properties are not being inherited correctly from custom elements. Let's take a look at a custom component foo:
@Component({
selector: 'foo',
template: `
<form>inside form</form>
<div>inside form</div>
outside
`,
})
export class FooComponent { }
My intention is to change its opacity and max-height:
foo {
opacity: 0.5;
max-height: 0;
overflow: hidden;
}
As it turns out, browsers like Firefox (59) seem to have issues properly inheriting these properties down to the child elements like form and div.
- Firefox (59) correctly inherits
opacity, but ignoresmax-height. - Chrome (64) doesn't inherit
opacityand disregardsmax-heightcompletely.
I have created a plunk showcasing the problem.
Could there be something peculiar about how custom elements handle CSS inheritance, or could this simply be browser bugs?