Should the best practice be to prefix Component and Directive selectors, but not properties of components.

Problem

Assume the following HTML snippet

<button title="OK" tooltip="When done." (click)="..." *if="...">text</button>

1. It looks like we are using browser button
2. It looks like title and tooltip are properties of button.

Surprise

Now imagine that the actual implementation is:

@Component({ selector:'button', properties: ['title'] })
@View(...)
class Button {
  title: string;
}

@Directives({selector:'[tooltip]', properties: ['tooltip']})
class Tooltip {
  tooltip: string;
}

But after seeing the implementation the developer realizes that:

1. button is not a native component
2. tooltip is a separate, unrelated directive which decorates the button

This creates a level of surprise for the developer and effects the readability of the HTML.

Proposal

As a best practice (not enforced) recommend that:

1. All components are prefixed (but not their properties)
2. All directives are prefixed

Implication

Now let’s rewrite the example with the above rules.

<md-button title="OK" jq-tooltip="When done." (click)="..." *ng-if="...">text</button>

It is immediately clear that:

1. md-button is a custom component and title is its property
2. jq-tooltip is a separate directive. Given that they have different prefixes (md- and jq-) it is unlikely that they have a communication channel.
3. ng-if comes from yet separate library. (again unlikely that they somehow communicate)

But why prefix the ng-if? Well remember that it is short hand for:

<template ng-if="...">
  <md-button title="OK" jq-tooltip="When done." (click)="...">text</button>
</template>

And if we don’t prefix it it would look like that template has if property, which is not the case.

[PatrickJS]

I like the idea of enforcing the namespace since it’s least surprised for the developer but consider for-of microsyntax

<li *ng-for="var item ng-of items | async">
  {{ item }} 
</li>

Namespace were recommended in angular1 for their directives/module yet not that many people actually went through with it (directives/modules). This was largely due to angular.module and having everything inside of angular world ($prefix). If we have all the influencers and docs all suggesting the namespace then people will follow it. We just have to make sure every example/toy app that is made demonstrates the convention.

lol what if we went more xml-like

<li *ng:for="var item ng:of items | async">
  <span *ng:if="item.complete">
    {{ item.content }} 
  </span>
</li>

[timjacobi]

+1 Would be nice to know what the conclusion of this is.