Why is my '#id' transformed into 'data-drupal-selector'? In a custom form I (try to) write, I have this element at the end:  

$form['referent'] = array(
    '#id' =&gt; 'breferentdistrib',
    '#type' =&gt; 'hidden',
    '#default_value' =&gt; ($bReferentDistrib) ? "Y" : "N"
);


'breferentdistrib' being used in javascript this way:
var breferentdistrib = document.getElementById("breferentdistrib").value;  

Unfortunately, I get this in the rendered HTML:
&lt;input type="hidden" value="N" name="referent" data-drupal-selector="breferentdistrib"&gt;  

No 'Id' and 'data-drupal-selector' instead.
Of course, my getElementById("breferentdistrib") is not working...
Any idea?
It's intentional as @clive says. You can select it using jQuery or CSS of the this way:

div[data-drupal-selector=your-selector-id]


If you want to use a id you can declare like this:

$form['referent']['#attributes']['id'] = 'foo';