CODEWITHSUNDEEP
dartdart-polymerpolymerangular-dart
Günter Zöchbauer
Günter Zöchbauer

Reputation: 657506

Why does Angular not need a dash in component name

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.

Upvotes: 16

Views: 2727

Answers (2)

James deBoer
James deBoer

Reputation: 2495

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.

Upvotes: 4

ebidel
ebidel

Reputation: 24109

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 -.

Upvotes: 10

Related Questions