Angular Element not rendering material css and some properties don't work as expected

Question

I have created an Angular element using Angular Material "MatSlider", when used as a component it works fine and renders all the css and input the properties works as expected, but once it is packaged and rendered as a web component in a separate html file none of the material css apply (only custom css which were added as part of component are rendered), also couple of in-build properties (min and max value) don't work where as the step and value properties works as expected.

below is my sample Element and its css

@Component({
  selector: 'app-custom-element',
  templateUrl: './custom-element.component.html',
  styleUrls: ['./custom-element.component.scss'],
  encapsulation: ViewEncapsulation.ShadowDom
})
export class CustomElementComponent {

  constructor() { }
  @Input() minValue: number = 1;
  @Input() maxValue: number = 10000;
  @Input() step: number = 1;
  @Input() value: number= 1;
  formatLabel(value: number) {
    if (value >= 1000) {
      return Math.round(value/ 1000)+ 'k';
    }

    return value;
  }

}

The Template

<div class="sliderDiv"><mat-slider [min]="minValue" [max]="maxValue" [step]="step" [value]="value"
  thumbLabel
    [displayWith]="formatLabel"
    tickInterval="1000"></mat-slider>
  </div>

The CSS

.sliderDiv{
  margin-top:30px !important;
}

mat-slider {
  width: 300px;
  background-color: beige !important;
}

After packaging I use it like this in my index.html

<script type="text/javascript" src="MaterialElement.js"></script>
    <custom-slider minValue="50" maxValue="500" step="2" value="2"></custom-slider>

The Step and value properties are set to 2 but the min value is still set to 1 and max value is still set to 10000, and none of the css apply.