Search code examples
htmlcssangularcustom-element

CSS properties of custom element not inherited to children

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 ignore max-height.
  • Chrome (64) doesn't inherit opacity, and also ignores max-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?

Solution

  • 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.

    Add

    foo { display: block; }

    or

    foo { display: inline-block; }

    and check what result you get ...