How to add a custom schema to Angular?

Problem

It's pretty common, that an Angular project wants to use some web-components, (aka. custom html tags). Of course, the compiler won't recognize these custom html tags and will complain:

1. If 'si-radio' is an Angular component, then verify that it is part of this module. 2. If 'si-radio' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

If you put 'CUSTOM_ELEMENTS_SCHEMA' into play, your templates won't be validated anymore in that module and your code become extremely error-prone.

Solution (?)

It would be much reasonable, if you could define the tags and properties, which you really want to use, and they could pass the validation process.

As far as I know, Angular is using the ElementSchemaRegistry. If you use a web-component-library, where all the custom tags are prefixed like <custom-component-.. you could write a CustomSchemaRegistry like this:

export class CustomSchemaRegistry extends DomElementSchemaRegistry {
  constructor() {
    super();
  }

  hasElement(tagName: string, schemaMetas: SchemaMetadata[]): boolean {
    const elementExists = tagName.includes('custom-component-') || super.hasElement(tagName, schemaMetas);
    console.log(tagName, elementExists);

    return elementExists;
  }

  hasProperty(tagName: string, propName: string, schemaMetas: SchemaMetadata[]): boolean {
    return tagName.includes('custom-component-') || super.hasProperty(tagName, propName, schemaMetas);
  }
}

And at bootstrapping you could provide it as a compilerOption:

platformBrowserDynamic()
  .bootstrapModule(AppModule, {
    providers: [{ provide: ElementSchemaRegistry, useValue: new CustomElementSchemaRegistry() }],
  })

The problem is, it just doesn't work. And I don't even see any recommendation in the official Angular documentation for such cases. Looks like such a use-case wasn't foreseen, although it's extremely common.

@NgModule.schemas is an array of SchemaMetadata, which seems to be a pretty useless interface with a single name: string property... https://angular.io/api/core/SchemaMetadata

Summing it up, is it actually possible to add a custom schema to Angular, allowing the usage of custom tags, while still preserving the template validation?