constructEncapsulatedCss function

String constructEncapsulatedCss(
  1. String? className,
  2. CssClassSet classes
)

Return a string representing the encapsulated classes from classes combined with the classes from className.

This can be used to copy encapsulation scope of a component outside of the component without copying any extra classes that might be on the host element. Then ::ng-deep (through mixins) can be used in the host component to style the popup without that style leaking to the whole application.

For example: .myPopup { // Mixin uses ::ng-deep but won't make all inputs blue. Instead just the // popups that originate from this component that the myPopup class // were added to. @include mat-input-bg-color($mat-blue); }

Dart Code: final popupClass = constructEncapsulatedCss('myPopup', _hostElement.classes);

Implementation

String constructEncapsulatedCss(String? className, CssClassSet classes) {
  var result = className ?? '';
  for (final i in classes) {
    // Add encapsulation classes from host
    if (i.startsWith('_ngcontent')) result += ' $i';
  }
  return result;
}