Flexible shadow component styling

component.scss

// The "modifier", such as '.md-primary' or '.md-fab' is applied to the 
// *host* element, but the style actually needs to be applied to an element
// within the shadow root. We can use a mixin to cover both native shadow DOM
// and emulated / polyfilled shadow DOM at the same time.

// Base mixin for general use.
@mixin host-context($element, $modifier, $target) {
  :host(#{$modifier}) #{$target},
  #{$element}#{$modifier} #{$target} {
    @content
  }
}

// Component-specifc wrapper for readability.
@mixin md-button($modifier) {
  @include host-context(md-button, $modifier, ".md-button") {
    @content
  }
}

// Actual style definitions.

@include md-button(".md-primary") {
  color: blue;
}

@include md-button(".md-raised") {
  position: absolute;
}

output.css

:host(.md-primary) .md-button,
md-button.md-primary .md-button {
  color: blue;
}

:host(.md-raised) .md-button,
md-button.md-raised .md-button {
  position: absolute;
}