diff --git a/packages/mdc-notched-outline/_mixins.scss b/packages/mdc-notched-outline/_mixins.scss
index 9769e127809..07d49604929 100644
--- a/packages/mdc-notched-outline/_mixins.scss
+++ b/packages/mdc-notched-outline/_mixins.scss
@@ -22,23 +22,116 @@
 
 @import "@material/theme/mixins";
 @import "@material/shape/mixins";
+@import "@material/floating-label/mixins";
 @import "@material/shape/functions";
+@import "@material/feature-targeting/functions";
+@import "@material/feature-targeting/mixins";
 @import "@material/rtl/mixins";
 @import "./variables";
 
-@mixin mdc-notched-outline-color($color) {
+@mixin mdc-notched-outline-core-styles($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  .mdc-notched-outline {
+    @include mdc-notched-outline-base_($query);
+
+    &__leading,
+    &__notch,
+    &__trailing {
+      @include mdc-feature-targets($feat-structure) {
+        box-sizing: border-box;
+        height: 100%;
+        border-top: $mdc-notched-outline-border-width solid;
+        border-bottom: $mdc-notched-outline-border-width solid;
+        pointer-events: none;
+      }
+    }
+
+    &__leading {
+      @include mdc-feature-targets($feat-structure) {
+        @include mdc-rtl-reflexive-property(border, $mdc-notched-outline-border-width solid, none);
+
+        width: $mdc-notched-outline-leading-width;
+      }
+    }
+
+    &__trailing {
+      @include mdc-feature-targets($feat-structure) {
+        @include mdc-rtl-reflexive-property(border, none, $mdc-notched-outline-border-width solid);
+
+        flex-grow: 1;
+      }
+    }
+
+    &__notch {
+      @include mdc-feature-targets($feat-structure) {
+        flex: 0 0 auto;
+        width: auto;
+        max-width: calc(100% - #{$mdc-notched-outline-leading-width} * 2);
+      }
+    }
+
+    .mdc-floating-label {
+      @include mdc-feature-targets($feat-structure) {
+        display: inline-block;
+        position: relative;
+        max-width: 100%;
+      }
+    }
+
+    .mdc-floating-label--float-above {
+      @include mdc-feature-targets($feat-structure) {
+        text-overflow: clip;
+      }
+    }
+
+    &--upgraded .mdc-floating-label--float-above {
+      @include mdc-feature-targets($feat-structure) {
+        max-width: calc(100% / .75);
+      }
+    }
+  }
+
+  .mdc-notched-outline--notched {
+    .mdc-notched-outline__notch {
+      @include mdc-feature-targets($feat-structure) {
+        @include mdc-rtl-reflexive-box(padding, right, 8px);
+
+        border-top: none;
+      }
+    }
+  }
+
+  .mdc-notched-outline--no-label {
+    .mdc-notched-outline__notch {
+      @include mdc-feature-targets($feat-structure) {
+        padding: 0;
+      }
+    }
+  }
+}
+
+@mixin mdc-notched-outline-color($color, $query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
+
   .mdc-notched-outline__leading,
   .mdc-notched-outline__notch,
   .mdc-notched-outline__trailing {
-    @include mdc-theme-prop(border-color, $color);
+    @include mdc-feature-targets($feat-color) {
+      @include mdc-theme-prop(border-color, $color);
+    }
   }
 }
 
-@mixin mdc-notched-outline-stroke-width($width) {
+@mixin mdc-notched-outline-stroke-width($width, $query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
   .mdc-notched-outline__leading,
   .mdc-notched-outline__notch,
   .mdc-notched-outline__trailing {
-    border-width: $width;
+    @include mdc-feature-targets($feat-structure) {
+      border-width: $width;
+    }
   }
 }
 
@@ -47,13 +140,18 @@
 /// Use this when floating label is aligned to center to prevent label jump on focus.
 /// @param {Number} $stroke-width Stroke width of notched outline that needs to be offset.
 ///
-@mixin mdc-notched-outline-notch-offset($stroke-width) {
+@mixin mdc-notched-outline-notch-offset($stroke-width, $query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
   .mdc-notched-outline--notched .mdc-notched-outline__notch {
-    padding-top: $stroke-width;
+    @include mdc-feature-targets($feat-structure) {
+      padding-top: $stroke-width;
+    }
   }
 }
 
-@mixin mdc-notched-outline-shape-radius($radius, $rtl-reflexive: false) {
+@mixin mdc-notched-outline-shape-radius($radius, $rtl-reflexive: false, $query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
   $radius: mdc-shape-prop-value($radius);
 
   @if (length($radius) > 1) {
@@ -64,39 +162,51 @@
   $radius: nth($radius, 1);
 
   .mdc-notched-outline__leading {
-    @include mdc-shape-radius(mdc-shape-mask-radius($radius, 1 0 0 1), $rtl-reflexive: true);
+    @include mdc-shape-radius(mdc-shape-mask-radius($radius, 1 0 0 1), $rtl-reflexive: true, $query: $query);
 
-    @if ($radius > $mdc-notched-outline-leading-width) {
-      width: $radius;
+    @include mdc-feature-targets($feat-structure) {
+      @if ($radius > $mdc-notched-outline-leading-width) {
+        width: $radius;
+      }
     }
   }
 
   @if ($radius > $mdc-notched-outline-leading-width) {
     .mdc-notched-outline__notch {
-      max-width: calc(100% - #{$radius} * 2);
+      @include mdc-feature-targets($feat-structure) {
+        max-width: calc(100% - #{$radius} * 2);
+      }
     }
   }
 
   .mdc-notched-outline__trailing {
-    @include mdc-shape-radius(mdc-shape-mask-radius($radius, 0 1 1 0), $rtl-reflexive: true);
+    @include mdc-shape-radius(mdc-shape-mask-radius($radius, 0 1 1 0), $rtl-reflexive: true, $query: $query);
   }
 }
 
-@mixin mdc-notched-outline-floating-label-float-position($positionY, $positionX: 0%, $scale: .75) {
-  @include mdc-floating-label-float-position($positionY + $mdc-notched-outline-label-adjust, $positionX, 1);
+@mixin mdc-notched-outline-floating-label-float-position(
+  $positionY, $positionX: 0%, $scale: .75, $query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  @include mdc-floating-label-float-position(
+    $positionY + $mdc-notched-outline-label-adjust, $positionX, 1, $query: $query);
 
   .mdc-floating-label--float-above {
-    font-size: ($scale * 1rem);
+    @include mdc-feature-targets($feat-structure) {
+      font-size: ($scale * 1rem);
+    }
   }
 
   // Two selectors to ensure we select the appropriate class when applied from this component or a parent component.
   &.mdc-notched-outline--upgraded,
   .mdc-notched-outline--upgraded {
-    @include mdc-floating-label-float-position($positionY, $positionX, $scale);
+    @include mdc-floating-label-float-position($positionY, $positionX, $scale, $query: $query);
 
     // stylelint-disable-next-line no-descending-specificity
     .mdc-floating-label--float-above {
-      font-size: 1rem;
+      @include mdc-feature-targets($feat-structure) {
+        font-size: 1rem;
+      }
     }
   }
 }
@@ -111,22 +221,56 @@
 /// @todo Replace mixin `mdc-notched-outline-floating-label-float-position` with this mixin when floating label is
 ///     center aligned in all the places.
 ///
-@mixin mdc-notched-outline-floating-label-float-position-absolute($positionY, $positionX: 0, $scale: .75) {
-  @include mdc-floating-label-float-position($positionY + $mdc-notched-outline-label-adjust-absolute, $positionX, 1);
+@mixin mdc-notched-outline-floating-label-float-position-absolute(
+  $positionY, $positionX: 0, $scale: .75, $query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  @include mdc-floating-label-float-position(
+    $positionY + $mdc-notched-outline-label-adjust-absolute, $positionX, 1, $query: $query);
 
   .mdc-floating-label--float-above {
-    font-size: ($scale * 1rem);
+    @include mdc-feature-targets($feat-structure) {
+      font-size: ($scale * 1rem);
+    }
   }
 
   // Two selectors to ensure we select the appropriate class when applied from this component or a parent component.
   &.mdc-notched-outline--upgraded,
   .mdc-notched-outline--upgraded {
     @include mdc-floating-label-float-position(
-      $positionY, $positionX, $scale);
+      $positionY, $positionX, $scale, $query: $query);
 
     // stylelint-disable-next-line no-descending-specificity
     .mdc-floating-label--float-above {
-      font-size: 1rem;
+      @include mdc-feature-targets($feat-structure) {
+        font-size: 1rem;
+      }
+    }
+  }
+}
+
+//
+// Private
+//
+@mixin mdc-notched-outline-base_($query) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  @include mdc-feature-targets($feat-structure) {
+    display: flex;
+    position: absolute;
+    right: 0;
+    left: 0;
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    /* @noflip */
+    text-align: left;
+    pointer-events: none;
+
+    @include mdc-rtl {
+      /* @noflip */
+      text-align: right;
     }
   }
 }
diff --git a/packages/mdc-notched-outline/mdc-notched-outline.scss b/packages/mdc-notched-outline/mdc-notched-outline.scss
index f48ab3cbd8b..ccb98d6f0bc 100644
--- a/packages/mdc-notched-outline/mdc-notched-outline.scss
+++ b/packages/mdc-notched-outline/mdc-notched-outline.scss
@@ -21,84 +21,9 @@
 //
 
 @import "@material/base/mixins";
-@import "@material/rtl/mixins";
 @import "./mixins";
-@import "./variables";
 
 // Notched Outline is intended for use by multiple components, but its styles should only be emitted once when bundled
 @include mdc-base-emit-once("mdc-notched-outline") {
-  .mdc-notched-outline {
-    display: flex;
-    position: absolute;
-    right: 0;
-    left: 0;
-    box-sizing: border-box;
-    width: 100%;
-    max-width: 100%;
-    height: 100%;
-    /* @noflip */
-    text-align: left;
-    pointer-events: none;
-
-    @include mdc-rtl {
-      /* @noflip */
-      text-align: right;
-    }
-
-    &__leading,
-    &__notch,
-    &__trailing {
-      box-sizing: border-box;
-      height: 100%;
-      border-top: $mdc-notched-outline-border-width solid;
-      border-bottom: $mdc-notched-outline-border-width solid;
-      pointer-events: none;
-    }
-
-    &__leading {
-      @include mdc-rtl-reflexive-property(border, $mdc-notched-outline-border-width solid, none);
-
-      width: $mdc-notched-outline-leading-width;
-    }
-
-    &__trailing {
-      @include mdc-rtl-reflexive-property(border, none, $mdc-notched-outline-border-width solid);
-
-      flex-grow: 1;
-    }
-
-    &__notch {
-      flex: 0 0 auto;
-      width: auto;
-      max-width: calc(100% - #{$mdc-notched-outline-leading-width} * 2);
-    }
-
-    .mdc-floating-label {
-      display: inline-block;
-      position: relative;
-      max-width: 100%;
-    }
-
-    .mdc-floating-label--float-above {
-      text-overflow: clip;
-    }
-
-    &--upgraded .mdc-floating-label--float-above {
-      max-width: calc(100% / .75);
-    }
-  }
-
-  .mdc-notched-outline--notched {
-    .mdc-notched-outline__notch {
-      @include mdc-rtl-reflexive-box(padding, right, 8px);
-
-      border-top: none;
-    }
-  }
-
-  .mdc-notched-outline--no-label {
-    .mdc-notched-outline__notch {
-      padding: 0;
-    }
-  }
+  @include mdc-notched-outline-core-styles;
 }
diff --git a/packages/mdc-notched-outline/package.json b/packages/mdc-notched-outline/package.json
index 99aa98551b4..e0198c2a4df 100644
--- a/packages/mdc-notched-outline/package.json
+++ b/packages/mdc-notched-outline/package.json
@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "@material/base": "^4.0.0",
+    "@material/feature-targeting": "^4.0.0",
     "@material/floating-label": "^4.0.0",
     "@material/rtl": "^4.0.0",
     "@material/shape": "^4.0.0",
diff --git a/test/scss/_feature-targeting-test.scss b/test/scss/_feature-targeting-test.scss
index 0e53b06d57a..2aab1102f6f 100644
--- a/test/scss/_feature-targeting-test.scss
+++ b/test/scss/_feature-targeting-test.scss
@@ -16,6 +16,7 @@
 @import "@material/list/mixins";
 @import "@material/menu-surface/mixins";
 @import "@material/menu/mixins";
+@import "@material/notched-outline/mixins";
 @import "@material/radio/mixins";
 @import "@material/ripple/mixins";
 @import "@material/shape/mixins";
@@ -241,6 +242,15 @@
     @include mdc-menu-surface-ink-color(on-surface, $query: $query);
     @include mdc-menu-surface-shape-radius(medium, $query: $query);
 
+    // Notched outline
+    @include mdc-notched-outline-core-styles($query: $query);
+    @include mdc-notched-outline-color(red, $query: $query);
+    @include mdc-notched-outline-stroke-width(1337px, $query: $query);
+    @include mdc-notched-outline-notch-offset(1337px, $query: $query);
+    @include mdc-notched-outline-shape-radius(42px, $query: $query);
+    @include mdc-notched-outline-floating-label-float-position(100%, $query: $query);
+    @include mdc-notched-outline-floating-label-float-position-absolute(100px, $query: $query);
+
     // Radio
     @include mdc-radio-core-styles($query: $query);
     @include mdc-radio-unchecked-stroke-color(red, $query: $query);