AngularJS Directives As "custom" HTML Tags: Isn't This Dangerous And May Conflict With Future HTML Versions?

I'm currently reading a lot about different JS frameworks (EmberJS, AngularJS, etc.). On first sight, I loved AngularJS' idea of using directives like custom HTML tags:

Solution 1:

I think you're quite safe creating your own element directives. The risk of a future HTML tag coming out with the same name is quite low.

You can also namespace your directives, and this will significantly reduce the risk of any future naming conflicts.

Let's say that your app name is "MyApp", you could have something like this:

<ma-custom-tag></ma-custom-tag>

This also assists with avoiding conflicts in any angular modules you may add to your project. Most angular libraries that are released should have some namespacing.

The Angular project has a best practices Wiki that touches on this concept: https://github.com/angular/angular.js/wiki/Best-Practices

Solution 2:

Custom elements require a dash in its name. Native HTML tags don't have dashes (at least there's no existing one). In angular you can define directives with camel cased names which solves your worries too.

Solution 3:

There is a small chance, yes. However, let's do some maths:

If your tag name is one letter long, there is a one in 26 chance of any one new tag having the same name.

If it is two letters long, there is a one in 26*26 chance.

In short, the chances of it happening are a few in 26^[number of letters in tag name]. Small. Given that the average tag name is 6 letters long in standard HTML, that's a one in 308915776 chance. And that's excluding your custom tags with dashes and all.

Furthermore, AngularJS is a Google project. Google are way ahead of the rest of us and if it looks like something like that's going to happen, they'll set a team on it and have a solution in hours if not less.

You don't need to worry about tag conflicts.

Share