What is the customElements schema in Angular and when do you need to use it?

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
  selector: 'app-web-component-host',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: '<h2>Design System Integration</h2>' +
    '<my-custom-slider [value]="val" (sliderChange)="onSlider($event)"></my-custom-slider>'
})
export class WebComponentHostComponent {
  val = 50;
  onSlider(e: any) {
    console.log('Value emitted:', e.detail);
  }
}