javascript - Cannot use letter x to start html attribute in Angular -

i noticed strange angular 1.5.6 components. have component called scale. call it:

<scale x-scale="xscale"></scale> 

and in controller:

$scope.xscale = 'lin'. 

and component definition:

angular     .module('myapp')         .component('scale', {             templateurl: 'analyse/components/scales/scale.tpl.html',             controller: function(){                 console.log('in controller , ', this);              },             bindings: {               xscale: '='             },     }); 

the console log outputs undefined.

but if change x-scale r-scale in template , xscale in binding rscale, works. in fact seems if replace x other letter, works. why this?

it's in documentation directives

normalization

angular normalizes element's tag , attribute name determine elements match directives.
typically refer directives case-sensitive camelcase normalized name (e.g. ngmodel).

however, since html case-insensitive, refer directives in dom lower-case forms, typically using dash-delimited attributes on dom elements (e.g. ng-model).

the normalization process follows:

1. strip x- , data- front of element/attributes.
2. convert :, -, or _ -delimited name camelcase.

so angular strips of x- front of attribute name normalize it, done because both regular data-attributes, starting data-, , x-attributes, starting x- valid in html 5.

the html5 specification states that

attribute names beginning 2 characters "x-" reserved user agent use , guaranteed never formally added html language.

it states that

for markup-level features intended use html syntax, extensions should limited new attributes of form "x-vendor-feature", vendor short string identifies vendor responsible extension, , feature name of feature.

the x- attributes aren't used often, noted above reserved browser vendors, , shouldn't using them, instead should using data-attributes, incidentally, angular remove data- part you, these

<scale data-scale="scale"></scale> <scale x-scale="scale"></scale> <scale scale="scale"></scale> 

are "same" when do

$scope.scale = 'lin'.