apply.html

<!-- inside shadow root -->
<style>
  .up-stepper {
    @apply --up-stepper;
  }
</style>
<div class="up-stepper"></div>

<!-- outside -->
<style>
  my-fancy-slider {
    --up-stepper: {
      color: blue;
      margin: 5px;
    }
  }
</style>

custompseudos.html

<!-- inside shadow root -->
<script>
  findUpStepper().exposeAsPseudoPart("up-stepper");
</script>
<div class="up-stepper"></div>

<!-- outside -->
<style>
  my-fancy-slider::part(up-stepper) {
    color: blue;
    margin: 5px;
  }
</style>