Skip to content

feat(overlay): hostClass property that sets a class on the rendered element to allow for CSS encapsulation #26453

Open
@ParadoxSpiral

Description

@ParadoxSpiral

Feature Description

Add a hostClass property besides the panelClass property that sets the classes on the inserted element instead of the overlay pane, e.g

<div id="cdk-overlay-0" class="panel-class" ...>
  <app-some-overlay class="host-class">...</app-some-overlay>
</div>

Use Case

This allows using proper CSS view encapsulation for the component styles, because then you could do this:

:host.host-class {
  // Some property
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: cdk/overlayfeatureThis issue represents a new feature or feature request rather than a bug or bug fix

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions