perf(material/radio): Optimize costly css selectors. (#30470)

kseamon · andrewseguin · commit c2b363ea6b35 · 2025-02-13T09:24:36.000-07:00
Descendant selectors containing :state selectors as ancestors are slow as they require the css engine to check all the way up to the dom root for matching elements. Using child selectors instead limits the scope of these checks to just the direct parent element. (cherry picked from commit 6bd31f9)
diff --git a/src/material/radio/_radio-common.scss b/src/material/radio/_radio-common.scss
@@ -35,41 +35,41 @@ $_icon-size: 20px;
 
     @if ($is-interactive) {
       // MDC's hover indication comes from their ripple which we don't use.
-      &:hover .mdc-radio__native-control:not([disabled]):not(:focus) {
+      &:hover > .mdc-radio__native-control:not([disabled]):not(:focus) {
         & ~ .mdc-radio__background::before {
           opacity: 0.04;
           transform: scale(1);
         }
       }
 
-      &:hover .mdc-radio__native-control:not([disabled]) ~ .mdc-radio__background {
-        .mdc-radio__outer-circle {
+      &:hover > .mdc-radio__native-control:not([disabled]) ~ .mdc-radio__background {
+        > .mdc-radio__outer-circle {
           @include token-utils.use-tokens($tokens...) {
             @include token-utils.create-token-slot(border-color, unselected-hover-icon-color);
           }
         }
       }
 
-      &:hover .mdc-radio__native-control:enabled:checked + .mdc-radio__background {
-        .mdc-radio__outer-circle,
-        .mdc-radio__inner-circle {
+      &:hover > .mdc-radio__native-control:enabled:checked + .mdc-radio__background {
+        > .mdc-radio__outer-circle,
+        > .mdc-radio__inner-circle {
           @include token-utils.use-tokens($tokens...) {
             @include token-utils.create-token-slot(border-color, selected-hover-icon-color);
           }
         }
       }
 
-      &:active .mdc-radio__native-control:enabled:not(:checked) + .mdc-radio__background {
-        .mdc-radio__outer-circle {
+      &:active > .mdc-radio__native-control:enabled:not(:checked) + .mdc-radio__background {
+        > .mdc-radio__outer-circle {
           @include token-utils.use-tokens($tokens...) {
             @include token-utils.create-token-slot(border-color, unselected-pressed-icon-color);
           }
         }
       }
 
-      &:active .mdc-radio__native-control:enabled:checked + .mdc-radio__background {
-        .mdc-radio__outer-circle,
-        .mdc-radio__inner-circle {
+      &:active > .mdc-radio__native-control:enabled:checked + .mdc-radio__background {
+        > .mdc-radio__outer-circle,
+        > .mdc-radio__inner-circle {
           @include token-utils.use-tokens($tokens...) {
             @include token-utils.create-token-slot(border-color, selected-pressed-icon-color);
           }
@@ -152,11 +152,11 @@ $_icon-size: 20px;
       + .mdc-radio__background {
         transition: _enter-transition(opacity), _enter-transition(transform);
 
-        .mdc-radio__outer-circle {
+        > .mdc-radio__outer-circle {
           transition: _enter-transition(border-color);
         }
 
-        .mdc-radio__inner-circle {
+        > .mdc-radio__inner-circle {
           transition: _enter-transition(transform), _enter-transition(border-color);
         }
       }
@@ -172,16 +172,16 @@ $_icon-size: 20px;
 
     &:disabled {
       @include token-utils.use-tokens($tokens...) {
-        &:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle {
+        &:not(:checked) + .mdc-radio__background > .mdc-radio__outer-circle {
           @include token-utils.create-token-slot(border-color, disabled-unselected-icon-color);
           @include token-utils.create-token-slot(opacity, disabled-unselected-icon-opacity);
         }
 
         + .mdc-radio__background {
           cursor: default;
 
-          .mdc-radio__inner-circle,
-          .mdc-radio__outer-circle {
+          > .mdc-radio__inner-circle,
+          > .mdc-radio__outer-circle {
             @include token-utils.create-token-slot(border-color, disabled-selected-icon-color);
             @include token-utils.create-token-slot(opacity, disabled-selected-icon-opacity);
           }
@@ -191,29 +191,29 @@ $_icon-size: 20px;
 
     &:enabled {
       @include token-utils.use-tokens($tokens...) {
-        &:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle {
+        &:not(:checked) + .mdc-radio__background > .mdc-radio__outer-circle {
           @include token-utils.create-token-slot(border-color, unselected-icon-color);
         }
 
         &:checked + .mdc-radio__background {
-          .mdc-radio__outer-circle,
-          .mdc-radio__inner-circle {
+          > .mdc-radio__outer-circle,
+          > .mdc-radio__inner-circle {
             @include token-utils.create-token-slot(border-color, selected-icon-color);
           }
         }
 
         @if ($is-interactive) {
           &:focus:checked + .mdc-radio__background {
-            .mdc-radio__inner-circle,
-            .mdc-radio__outer-circle {
+            > .mdc-radio__inner-circle,
+            > .mdc-radio__outer-circle {
               @include token-utils.create-token-slot(border-color, selected-focus-icon-color);
             }
           }
         }
       }
     }
 
-    &:checked + .mdc-radio__background .mdc-radio__inner-circle {
+    &:checked + .mdc-radio__background > .mdc-radio__inner-circle {
       transform: scale(0.5);
       transition: _enter-transition(transform), _enter-transition(border-color);
     }
@@ -224,16 +224,19 @@ $_icon-size: 20px;
       pointer-events: auto;
 
       @include token-utils.use-tokens($tokens...) {
-        .mdc-radio__native-control:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle {
+        // stylelint-disable selector-combinator-space-before
+        .mdc-radio__native-control:not(:checked) + .mdc-radio__background
+            > .mdc-radio__outer-circle {
           @include token-utils.create-token-slot(border-color, disabled-unselected-icon-color);
           @include token-utils.create-token-slot(opacity, disabled-unselected-icon-opacity);
         }
+        // stylelint-enable selector-combinator-space-before
 
         &:hover .mdc-radio__native-control:checked + .mdc-radio__background,
         .mdc-radio__native-control:checked:focus + .mdc-radio__background,
         .mdc-radio__native-control + .mdc-radio__background {
-          .mdc-radio__inner-circle,
-          .mdc-radio__outer-circle {
+          > .mdc-radio__inner-circle,
+          > .mdc-radio__outer-circle {
             @include token-utils.create-token-slot(border-color, disabled-selected-icon-color);
             @include token-utils.create-token-slot(opacity, disabled-selected-icon-opacity);
           }
diff --git a/src/material/radio/radio.scss b/src/material/radio/radio.scss
@@ -50,7 +50,7 @@
     pointer-events: none;
     border-radius: 50%;
 
-    .mat-ripple-element {
+    > .mat-ripple-element {
       opacity: 0.14;
     }
 
@@ -62,8 +62,8 @@
   // We don't inherit the border focus style from MDC since we don't use their ripple.
   // Instead we need to replicate it here.
   @include token-utils.use-tokens(tokens-mdc-radio.$prefix, tokens-mdc-radio.get-token-slots()) {
-    .mdc-radio .mdc-radio__native-control:focus:enabled:not(:checked) {
-      & ~ .mdc-radio__background .mdc-radio__outer-circle {
+    .mdc-radio > .mdc-radio__native-control:focus:enabled:not(:checked) {
+      & ~ .mdc-radio__background > .mdc-radio__outer-circle {
         @include token-utils.create-token-slot(border-color, unselected-focus-icon-color);
       }
     }

Original file line number	Diff line number	Diff line change
`@@ -35,41 +35,41 @@ $_icon-size: 20px;`
`35`	`35`
`36`	`36`	`@if ($is-interactive) {`
`37`	`37`	`// MDC's hover indication comes from their ripple which we don't use.`
`38`		`- &:hover .mdc-radio__native-control:not([disabled]):not(:focus) {`
	`38`	`+ &:hover > .mdc-radio__native-control:not([disabled]):not(:focus) {`
`39`	`39`	`& ~ .mdc-radio__background::before {`
`40`	`40`	`opacity: 0.04;`
`41`	`41`	`transform: scale(1);`
`42`	`42`	`}`
`43`	`43`	`}`
`44`	`44`
`45`		`- &:hover .mdc-radio__native-control:not([disabled]) ~ .mdc-radio__background {`
`46`		`- .mdc-radio__outer-circle {`
	`45`	`+ &:hover > .mdc-radio__native-control:not([disabled]) ~ .mdc-radio__background {`
	`46`	`+ > .mdc-radio__outer-circle {`
`47`	`47`	`@include token-utils.use-tokens($tokens...) {`
`48`	`48`	`@include token-utils.create-token-slot(border-color, unselected-hover-icon-color);`
`49`	`49`	`}`
`50`	`50`	`}`
`51`	`51`	`}`
`52`	`52`
`53`		`- &:hover .mdc-radio__native-control:enabled:checked + .mdc-radio__background {`
`54`		`- .mdc-radio__outer-circle,`
`55`		`- .mdc-radio__inner-circle {`
	`53`	`+ &:hover > .mdc-radio__native-control:enabled:checked + .mdc-radio__background {`
	`54`	`+ > .mdc-radio__outer-circle,`
	`55`	`+ > .mdc-radio__inner-circle {`
`56`	`56`	`@include token-utils.use-tokens($tokens...) {`
`57`	`57`	`@include token-utils.create-token-slot(border-color, selected-hover-icon-color);`
`58`	`58`	`}`
`59`	`59`	`}`
`60`	`60`	`}`
`61`	`61`
`62`		`- &:active .mdc-radio__native-control:enabled:not(:checked) + .mdc-radio__background {`
`63`		`- .mdc-radio__outer-circle {`
	`62`	`+ &:active > .mdc-radio__native-control:enabled:not(:checked) + .mdc-radio__background {`
	`63`	`+ > .mdc-radio__outer-circle {`
`64`	`64`	`@include token-utils.use-tokens($tokens...) {`
`65`	`65`	`@include token-utils.create-token-slot(border-color, unselected-pressed-icon-color);`
`66`	`66`	`}`
`67`	`67`	`}`
`68`	`68`	`}`
`69`	`69`
`70`		`- &:active .mdc-radio__native-control:enabled:checked + .mdc-radio__background {`
`71`		`- .mdc-radio__outer-circle,`
`72`		`- .mdc-radio__inner-circle {`
	`70`	`+ &:active > .mdc-radio__native-control:enabled:checked + .mdc-radio__background {`
	`71`	`+ > .mdc-radio__outer-circle,`
	`72`	`+ > .mdc-radio__inner-circle {`
`73`	`73`	`@include token-utils.use-tokens($tokens...) {`
`74`	`74`	`@include token-utils.create-token-slot(border-color, selected-pressed-icon-color);`
`75`	`75`	`}`
`@@ -152,11 +152,11 @@ $_icon-size: 20px;`
`152`	`152`	`+ .mdc-radio__background {`
`153`	`153`	`transition: _enter-transition(opacity), _enter-transition(transform);`
`154`	`154`
`155`		`- .mdc-radio__outer-circle {`
	`155`	`+ > .mdc-radio__outer-circle {`
`156`	`156`	`transition: _enter-transition(border-color);`
`157`	`157`	`}`
`158`	`158`
`159`		`- .mdc-radio__inner-circle {`
	`159`	`+ > .mdc-radio__inner-circle {`
`160`	`160`	`transition: _enter-transition(transform), _enter-transition(border-color);`
`161`	`161`	`}`
`162`	`162`	`}`
`@@ -172,16 +172,16 @@ $_icon-size: 20px;`
`172`	`172`
`173`	`173`	`&:disabled {`
`174`	`174`	`@include token-utils.use-tokens($tokens...) {`
`175`		`- &:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle {`
	`175`	`+ &:not(:checked) + .mdc-radio__background > .mdc-radio__outer-circle {`
`176`	`176`	`@include token-utils.create-token-slot(border-color, disabled-unselected-icon-color);`
`177`	`177`	`@include token-utils.create-token-slot(opacity, disabled-unselected-icon-opacity);`
`178`	`178`	`}`
`179`	`179`
`180`	`180`	`+ .mdc-radio__background {`
`181`	`181`	`cursor: default;`
`182`	`182`
`183`		`- .mdc-radio__inner-circle,`
`184`		`- .mdc-radio__outer-circle {`
	`183`	`+ > .mdc-radio__inner-circle,`
	`184`	`+ > .mdc-radio__outer-circle {`
`185`	`185`	`@include token-utils.create-token-slot(border-color, disabled-selected-icon-color);`
`186`	`186`	`@include token-utils.create-token-slot(opacity, disabled-selected-icon-opacity);`
`187`	`187`	`}`
`@@ -191,29 +191,29 @@ $_icon-size: 20px;`
`191`	`191`
`192`	`192`	`&:enabled {`
`193`	`193`	`@include token-utils.use-tokens($tokens...) {`
`194`		`- &:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle {`
	`194`	`+ &:not(:checked) + .mdc-radio__background > .mdc-radio__outer-circle {`
`195`	`195`	`@include token-utils.create-token-slot(border-color, unselected-icon-color);`
`196`	`196`	`}`
`197`	`197`
`198`	`198`	`&:checked + .mdc-radio__background {`
`199`		`- .mdc-radio__outer-circle,`
`200`		`- .mdc-radio__inner-circle {`
	`199`	`+ > .mdc-radio__outer-circle,`
	`200`	`+ > .mdc-radio__inner-circle {`
`201`	`201`	`@include token-utils.create-token-slot(border-color, selected-icon-color);`
`202`	`202`	`}`
`203`	`203`	`}`
`204`	`204`
`205`	`205`	`@if ($is-interactive) {`
`206`	`206`	`&:focus:checked + .mdc-radio__background {`
`207`		`- .mdc-radio__inner-circle,`
`208`		`- .mdc-radio__outer-circle {`
	`207`	`+ > .mdc-radio__inner-circle,`
	`208`	`+ > .mdc-radio__outer-circle {`
`209`	`209`	`@include token-utils.create-token-slot(border-color, selected-focus-icon-color);`
`210`	`210`	`}`
`211`	`211`	`}`
`212`	`212`	`}`
`213`	`213`	`}`
`214`	`214`	`}`
`215`	`215`
`216`		`- &:checked + .mdc-radio__background .mdc-radio__inner-circle {`
	`216`	`+ &:checked + .mdc-radio__background > .mdc-radio__inner-circle {`
`217`	`217`	`transform: scale(0.5);`
`218`	`218`	`transition: _enter-transition(transform), _enter-transition(border-color);`
`219`	`219`	`}`
`@@ -224,16 +224,19 @@ $_icon-size: 20px;`
`224`	`224`	`pointer-events: auto;`
`225`	`225`
`226`	`226`	`@include token-utils.use-tokens($tokens...) {`
`227`		`- .mdc-radio__native-control:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle {`
	`227`	`+ // stylelint-disable selector-combinator-space-before`
	`228`	`+ .mdc-radio__native-control:not(:checked) + .mdc-radio__background`
	`229`	`+ > .mdc-radio__outer-circle {`
`228`	`230`	`@include token-utils.create-token-slot(border-color, disabled-unselected-icon-color);`
`229`	`231`	`@include token-utils.create-token-slot(opacity, disabled-unselected-icon-opacity);`
`230`	`232`	`}`
	`233`	`+ // stylelint-enable selector-combinator-space-before`
`231`	`234`
`232`	`235`	`&:hover .mdc-radio__native-control:checked + .mdc-radio__background,`
`233`	`236`	`.mdc-radio__native-control:checked:focus + .mdc-radio__background,`
`234`	`237`	`.mdc-radio__native-control + .mdc-radio__background {`
`235`		`- .mdc-radio__inner-circle,`
`236`		`- .mdc-radio__outer-circle {`
	`238`	`+ > .mdc-radio__inner-circle,`
	`239`	`+ > .mdc-radio__outer-circle {`
`237`	`240`	`@include token-utils.create-token-slot(border-color, disabled-selected-icon-color);`
`238`	`241`	`@include token-utils.create-token-slot(opacity, disabled-selected-icon-opacity);`
`239`	`242`	`}`
Original file line number	Diff line number	Diff line change
`@@ -50,7 +50,7 @@`
`50`	`50`	`pointer-events: none;`
`51`	`51`	`border-radius: 50%;`
`52`	`52`
`53`		`- .mat-ripple-element {`
	`53`	`+ > .mat-ripple-element {`
`54`	`54`	`opacity: 0.14;`
`55`	`55`	`}`
`56`	`56`
`@@ -62,8 +62,8 @@`
`62`	`62`	`// We don't inherit the border focus style from MDC since we don't use their ripple.`
`63`	`63`	`// Instead we need to replicate it here.`
`64`	`64`	`@include token-utils.use-tokens(tokens-mdc-radio.$prefix, tokens-mdc-radio.get-token-slots()) {`
`65`		`- .mdc-radio .mdc-radio__native-control:focus:enabled:not(:checked) {`
`66`		`- & ~ .mdc-radio__background .mdc-radio__outer-circle {`
	`65`	`+ .mdc-radio > .mdc-radio__native-control:focus:enabled:not(:checked) {`
	`66`	`+ & ~ .mdc-radio__background > .mdc-radio__outer-circle {`
`67`	`67`	`@include token-utils.create-token-slot(border-color, unselected-focus-icon-color);`
`68`	`68`	`}`
`69`	`69`	`}`