#shadow-root in angular template - angularjs

Question

I have an an input box in my angular template that looks like below:
<input type="text"
name="growth"
label="Growth"
ng-model="mySettings.growth"
class="input-mini text"
required
integer
min="0"
max="4"
tooltip
tooltip-trigger="{{{true: 'mouseenter', false: 'never'}[mySettings.growth.$invalid]}}"
tooltip-placement="right"
/>
When this is rendered by angular, it looks like below:
<input type="text" name="growth" label="Growth" ng-model="mySettings.growth" class="input-mini text ng-scope ng-pristine ng-valid ng-valid-required ng-valid-integer" required="" integer="" min="0" max="4" tooltip="" tooltip-trigger="never" tooltip-placement="right">
#shawdow-root (user-agent)
<div id="inner-editor">10</div>
</input>
What is this #shadow-root element that's showing up above ?

Answer 1

The #shadow-root is not really an element, but an annotation added by the browser to make clear that the following element (the .inner-editor div element) is the Shadow DOM added by the browser to display the input field.
Consider a more complex form element like a slider. As a developer you simply set the input type to "range" and have a functional slider which is represented by a single input tag.
The knob and the slider track is rendered by the browser as well, but hidden for any CSS selectors or JavaScript DOM traversal functions since you only add a single input tag it would break things if the browser silently attaches DOM nodes to render the slider correctly. This "hidden DOM elements" are called Shadow DOM.
In Chrome Browser the visibility of the Shadow DOM in the Elements tab can be switched by an option under Settings > General > Elements > 'Show user agent shadow DOM'.
For further information about Shadow DOM I found this link from HTML5 Rocks and this resource were very helpful for me.
This Shadow DOM elements can be found inside a normal input tag as well, it does not relate to the AngularJS input directive you have in your example.
For CSS selection there is a ::shadow pseudo class and also a JavaScript Shadow DOM traversal API - see the HTML5 Rocks link above.
The upcomming WebComponents make use of the shadow DOM. If you are interested in implementations you may have a look at thePolymer project and its sources which makes heavy use of the Shadow DOM.