afd68e5674
This is based on a discussion we had a few weeks ago. Currently if a component uses `ViewEncapsulation.ShadowDom` and its selector doesn't meet the requirements for a custom element tag name, a vague error will be thrown at runtime saying something like "Element does not support attachShadowRoot". These changes add a new diagnostic to the compiler that validates the component selector and gives a better error message during compilation. PR Close #42245
735 B
735 B
@name Invalid Shadow DOM selector @category compiler @shortDescription Component selector does not match shadow DOM requirements
@description
The selector of a component using ViewEncapsulation.ShadowDom doesn't match the custom element tag name requirements.
In order for a tag name to be considered a valid custom element name, it has to:
- Be in lower case.
- Contain a hyphen.
- Start with a letter (a-z).
@debugging Rename your component's selector so that it matches the requirements.
Before:
@Component({
selector: 'comp',
encapsulation: ViewEncapsulation.ShadowDom
...
})
After:
@Component({
selector: 'app-comp',
encapsulation: ViewEncapsulation.ShadowDom
...
})