#shadow-root in angular模板

Question

我的angular模板中有一个输入框，如下所示：

<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"
      />

当它由angular渲染时，它看起来如下所示：

<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>

上面显示的这个#shadow-root元素是什么？

Answer 1

# Shadow -root并不是一个真正的元素，而是浏览器添加的一个注释，用来表明下面的元素(.nel-editor div元素)是浏览器添加的用于显示输入字段的Shadow DOM。

考虑一个更复杂的表单元素，比如滑块。作为一名开发人员，您只需将输入类型设置为"range“，并拥有一个由单个input标记表示的功能滑块。

旋钮和滑块轨迹也是由浏览器渲染的，但对于任何CSS选择器或JavaScript DOM遍历函数都是隐藏的，因为您只添加了一个输入标记，如果浏览器静默地附加DOM节点以正确渲染滑块，则会破坏一切。这种“隐藏的DOM元素”被称为Shadow DOM。

在Chrome浏览器中，元素标签中阴影DOM的可见性可以通过设置>常规>元素>‘显示用户代理阴影DOM’下的一个选项来切换。

关于Shadow DOM的更多信息，我发现this link from HTML5 Rocks和this resource对我很有帮助。

这个阴影DOM元素也可以在普通的输入标记中找到，它与示例中的AngularJS输入指令无关。

对于CSS选择，有一个::shadow伪类和一个JavaScript Shadow DOM遍历API --参见上面的HTML5 Rock链接。

正在兴起的WebComponents利用了影子DOM。如果您对实现感兴趣，可以查看Polymer项目及其源代码，其中大量使用了Shadow DOM。