Why does Angular not need a dash in component name

Question

I wondered why Polymer elements need a dash in custom elements name like <my-component> while this is not necessary for Angular components especially as Angular components also use ShadowDOM.

** Edit** It doesn't even seem to be suggested good practice in Angular.

Answer 1

The HTML spec allows you to use unknown tags (<tab>, <panel>) without the HTML parser throwing a fit. To their benefit, Angular uses this behavior for their directives to make the components like native.

Tags that don't have a - inherit from HTMLUnknownElement. There's a good explanation of the upgrade process here: HTML5Rocks - Custom Elements - How elements are upgraded

Since Angular directives were designed in a time before the Custom Elements spec existed, they don't use a -. It's the standard that requires element names contain a -.

Answer 2

The dash is not required by Angular since there is no technical reason to require it. However, all large projects I have worked on prefix all components and directives with a two character and then dash prefix, e.g "ab-tab".

First, using dashes in names makes your syntax compatible with the Custom Elements standard, although Angular doesn't depending the spec.

Second, it helps with organization. Standard Angular directives are all prefixed with 'ng-'. By using your own prefix, people reading your code will be able to quickly distinguish between components from different libraries.