我已经使用Angular Material“ MatSlider”创建了一个Angular元素，当用作组件时，它可以正常工作并呈现所有CSS，并且输入的属性按预期工作，但是一旦将其打包并呈现为Web组件，单独的html文件，没有任何适用于CSS的材料（仅呈现作为组件的一部分添加的自定义css），而且一些内置属性（最小值和最大值）在step和value属性起作用的情况下不起作用预期的。

下面是我的示例元素及其CSS

onDetailButtonPress={() =>
  this.props.navigation.navigate('ReleaseDetail',{ releaseId: selectedReleaseId })
}

模板

@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;
  }

}

CSS

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

打包后，在index.html中像这样使用它

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

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

“步长”和“值”属性设置为2，但最小值仍设置为1，最大值仍设置为10000，并且没有CSS适用。