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?

回答1:

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

回答2:

try you add respectively tags to apply the css in the necessary tags. Ej:

    foo.opacity-test form {
       opacity: 0.5;
    }

来源：https://stackoverflow.com/questions/49322168/css-properties-of-custom-element-not-inherited-to-children