Angular scss not working $self due to shadowcsshost?

Question

Angular

And so the problem is that in $selfgets :host .ui-input, since & will contain :host .ui-button.

Angular forbids using this construct:

:host {
     // code
     :host {
          // code
     }
}

And in css adds shadowcsshost:

Answer 1

The solution to this problem is a simple scss function:

$self: self(&);

@function self($self) {
  @return selector-replace($self, ':host', '*');
}

We simply replace :host with *