Do Angular 5 components need a `-` in the selector?

Question

I'm reviewing this Angular 5 forms youtube tutorial and in it Sebastian initially has the form selector named app-form01, but he removes the app- portion. IIUC custom elements are supposed to have the -. Has this been relaxed?

Answer 1

- is not required at all. It is considered good practice because it conforms to the custom element requirements. Besides that the behavior of the component will be exactly the same with or without the - and you can also use mixed case names.

See also

• Why does Angular not need a dash in component name

• https://github.com/angular/angular/issues/5968

During the kebab-case removal we kept element selectors dasherized because of custom element spec.

Component name remains dash-cased because a dash is required by the custom element spec, which we use for guidance since even after making Angular templates case-sensitive the templates remain valid html5 fragments (although with higher fidelity due to case-sensitivity that only our html parser can see).

Very few people know about the custom element spec and the guarantees the dash gives us, so I think that it would be better to enforce that all directive/component element selectors have at least a single dash in it. There should be a way to opt out via a flag in the Component/Directive metadata, but it shouldn't be on by default.

If someone is unfamiliar with the custom element spec, the benefits of adding a dash to the element name are:

• the element becomes a custom element - the type of the DOM node is HTMLElement instead of HTMLUnknownElement
• in case we need it, we can benefit from the :unresolved psedo-class by registering a fake element via document.registerElement
• the spec guarantees that browsers will not introduce native elements with a dash in the name, meaning that apps won't break in the future should browsers natively implement an element that matches an Angular Component selector (e.g. )

More info about custom elements.