Generated by SassMeister.com.

input.scss

$namespace: 'mynamespace_';

// .a > ::slotted(*) => .a > *
// :host(*) => &El*
// scoping

// Step 1: all inputs must have `:host` converted to `.El` and `::slotted(a)` converted to `a`.
// Step 2: If scoping is on, the main Sass file needs to be namespace-ified.

/* Raw *************** */

.my-namespace {
    
  &_a {
      color: orange;
  }
}


/* Scope *************** */
@function scope($class, $name: $namespace) {
    @return $name + $class;
}

.#{scope(foo)} > .#{scope(bar)} {
    color: blue;
}

@function host($shadow: true, $inner: '') {
    @if ($shadow) {
        @if ($inner != '') {
          @return ':host(' + $inner + ')';   
        } @else {
          @return ':host';
        }
    } @else {
      @return '&El' + $inner;  
    }
}

/* Host Shadow *************** */

#{host(true)} {
  padding: 2px;
}

#{host(true, '[zonk]')} {
  color: navy;
}

/* Host Wit *************** */
.my-namespace_ {
    
  #{host(false)} {
    padding: 2px;
  }
  
  #{host(false, '[zonk2]')} {
    color: navy;
  }
}

/* Slotted Shadow *************** */

@function slotted($shadow: true, $class: '', $inner: '*') {
    @if ($shadow) {
      @return '.' + $class + ' ::slotted(' + $inner + ')';   
    } @else {
      @return '&' + $class + ' > ' + $inner;  
    }
}

#{slotted(true, 'outside')} {
    color: orange;
}

#{slotted(true, 'outside', '.item')} {
    margin: 5px;
}

/* Slotted Wit *************** */
.my-namespace_ {
    
  #{slotted(false, 'outside')} {
    color: orange;
  }

  // The right side needs scoping, somehow?!?
  #{slotted(false, 'outside', '.item')} {
    padding: 2px;
  }
  
}

output.css

/* Raw *************** */
.my-namespace_a {
  color: orange;
}

/* Scope *************** */
.mynamespace_foo > .mynamespace_bar {
  color: blue;
}

/* Host Shadow *************** */
:host {
  padding: 2px;
}

:host([zonk]) {
  color: navy;
}

/* Host Wit *************** */
.my-namespace_El {
  padding: 2px;
}
.my-namespace_El[zonk2] {
  color: navy;
}

/* Slotted Shadow *************** */
.outside ::slotted(*) {
  color: orange;
}

.outside ::slotted(.item) {
  margin: 5px;
}

/* Slotted Wit *************** */
.my-namespace_outside > * {
  color: orange;
}
.my-namespace_outside > .item {
  padding: 2px;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}