I have a component which renders this kind of html due to using a 3rd party ui component library:

<custom-component class="button-border">
    <button>Press me</button>
</custom-component>

I have defined styles for a button element with a class "button-border". Is there a way to make it behave as if the "button-border" class was given directly to the button instead of the parent element?

I have a component which renders this kind of html due to using a 3rd party ui component library:

<custom-component class="button-border">
    <button>Press me</button>
</custom-component>

I have defined styles for a button element with a class "button-border". Is there a way to make it behave as if the "button-border" class was given directly to the button instead of the parent element?

• css

2 Answers 2

Yes, apply rules to button: .button-border > button {} instead of .button-border {}

Answering the CSS question: copy parent class behavior to children - use all: inherit;:

.parent{
  font-style: italic;
  cursor: pointer;
  color: red;
  button{
    all: inherit;
  }
}

<div class="parent">
  <button>Text</button>
</div>