Angularjs - custom directive with the same name of standard html elements

Question

What happens if I create a directive that has the same name of standard html attributes or elements? For example if I define:

.directive('link', function(){
  return {
    restrict: 'A',
    link: function(scope, elements, attributes){
      // do something
   }
})

used like this

<a link="http://www.foo.com" ng-href="www.google.com">Conditional Link </a>

would it conflict with the standard <link rel="stylesheet" type="text/css" href="theme.css"> element?

Maybe in this case it would not because I've restricted the directive to attributes only, but my question is more general.

For example what if I named my directive href ?
Will the directives always have the precedence over the standard html element or attributes?

Answer 1

Directives can attach behavior to existing html element. If you create directive href, i believe there should be no issue, unless your directive removes itself (or href ). There is no concept of precedence unless multiple directives are defined or applied on same element.

Remember you cannot change the behavior of browser, if browser sees a href with a remote url it would make a request irrespective.

AngularJS itself uses <input /> as a directive and it works fine with the standard input behavior intact.