Adding custom components

Sometimes we need a custom component to show in our forms, here's how.
First, make sure the dependency @webcomponents/custom-elements is installed in your implementation.
Add the line the following line to your scripts array in the angular.json of your implementation if it's not already there:
Also, add the following line to polyfills.ts in the src folder of your implementation if it's not already there:
import '@webcomponents/custom-elements/custom-elements.min';
Create a custom component, and a registration definition according to this guide:
Add your custom component to the declarations array in your AppModule.
Finally, it is necessary to add the registration function, and your component selector under COMPONENT_OPTIONS, both exported from your registration definition file, to the environment file of your implementation under the key customFormioComponentRegistrations like in this example:
// environment.ts
import {RATING_COMPONENT_OPTIONS, registerRatingComponent} from '@app/custom-formio-rating';
export const environment: Environment = {
customFormioComponentRegistrations: [{
selector: RATING_COMPONENT_OPTIONS.selector,
function: registerRatingComponent