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 { }
Now, I want to alter its opacity
and max-height
:
foo {
opacity: 0.5;
max-height: 0;
overflow: hidden;
}
However, browsers seem to not inherit those properties correctly down to the form
and div
elements.
- Firefox (59) properly inherits
opacity
, but seems to ignoremax-height
. - Chrome (64) doesn't inherit
opacity
, and also ignoresmax-height
altogether.
I made a plunk demonstrating the issue.
Is there some twist about how custom elements inherit CSS properties, or are those just browser bugs?
Neither
opacity
normax-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.Add
or
and check what result you get ...
try you add respectively tags to apply the css in the necessary tags. Ej: