CUSTOM_ELEMENTS_SCHEMA breaks validation for known components

[cronon]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

I use angular alongside with custom elements, however if I use CUSTOM_ELEMENTS_SCHEMA it stops validating not only custom elements, but angular components as well

Expected behavior

I'd like validation continue to work for angular components

Minimal reproduction of the problem with instructions

1. Go to https://stackblitz.com/edit/angular-lmwemp?file=src/app/app.module.ts
2. See the error Can't bind to 'foo' since it isn't a known property of 'app-heroes'
3. Uncomment line 17 in app.module.ts
4. No more error

Environment

Angular version: 6.0.3

[mhevery]

Yes, that is the correct behavior. We don't know what elements are custom-elements and so we have to disable the validation everywhere. There really is no good way to know which element is custom element and which is not.

[cronon]

Indeed, when we face some tag we cannot say if it is custom element or just a misspelled tag. But at least we could check if this tag is an angular component and make validation for it :)

[pkozlowski-opensource]

This is still reproducible with the lates Angular v9 running ivy: https://stackblitz.com/edit/angular-ivy-nyg1z7?file=src%2Fapp%2Fapp.component.ts

While it is true that during AoT compilation CUSTOM_ELEMENTS_SCHEMA disables all validation for custom elements not specified in the schema (as we can't known if it is valid or not), we could improve situation a bit in JIT, as checks are done during runtime in ivy. Relevant code:

angular/packages/core/src/render3/instructions/shared.ts

Lines 1091 to 1105 in ed1b4a8

	export function matchingSchemas(tView: TView, lView: LView, tagName: string|null): boolean {
	const schemas = tView.schemas;
	if (schemas !== null) {
	for (let i = 0; i < schemas.length; i++) {
	const schema = schemas[i];
	if (schema === NO_ERRORS_SCHEMA ||
	schema === CUSTOM_ELEMENTS_SCHEMA && tagName && tagName.indexOf('-') > -1) {
	return true;
	}
	}
	}
	return false;
	}

[pkozlowski-opensource]

Also relevant: #12045

[atscott]

Closing in favor of #12045

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}