Skip to content

Commit 7257817

Browse files
committed
fix(cdk/a11y): make cdk-high-contrast work w/ emulated view encapsulation
Say you have this in your component: ```scss .some-element { @include cdk-high-contrast() { border: 1px solid white; } } ``` With this change, this will output: ```scss .cdk-high-contrast-active .some-element, .cdk-high-contrast-active :host .some-element { border: 1px solid white; } ``` Here, `.cdk-high-contrast-active .some-element` will apply in places where encapsulation is turned off, and `.cdk-high-contrast-active :host .some-element` will apply in cases where encapsulation is emulated. Neither will work in Shadow DOM (which we don't officially support). AFAIK, Shadow DOM would need to use `:host-content()`, which we could consider adding if we get an additional request. This adds a few more bytes, but high-contrast styles tend to be pretty limited.
1 parent 31a50f7 commit 7257817

File tree

1 file changed

+2
-1
lines changed

1 file changed

+2
-1
lines changed

src/cdk/a11y/_a11y.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@
3535
// context. We address this by nesting the selector context under .cdk-high-contrast.
3636
@at-root {
3737
$selector-context: #{&};
38-
.cdk-high-contrast-#{$target} {
38+
.cdk-high-contrast-#{$target},
39+
.cdk-high-contrast-#{$target} :host {
3940
@if ($selector-context == '') {
4041
@content;
4142
}

0 commit comments

Comments
 (0)