Question

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

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

当这是由角度渲染时，它看起来如下：

<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实际上不是一个元素，而是由浏览器添加的注释，以明确以下元素（.inner-editor div元素）是浏览器添加的Shadow DOM以显示输入字段

考虑一个更复杂的表单元素，如滑块。作为开发人员，您只需将输入类型设置为“范围”，并具有一个功能滑块，该滑块由单个输入标记表示。

旋钮和滑块轨道也由浏览器呈现，但是对于任何CSS选择器或JavaScript DOM遍历函数都是隐藏的，因为如果浏览器以静默方式附加DOM节点来渲染，那么它只会添加单个输入标记。滑块正确。这个“隐藏的DOM元素”称为Shadow DOM。

在Chrome浏览器中，可以通过设置＆gt;下的选项切换元素选项卡中Shadow DOM的可见性。一般＆gt;元素＆gt; '显示用户代理影子DOM'。

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

这个Shadow DOM元素也可以在普通的输入标签中找到，它与你的例子中的AngularJS输入指令无关。

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

upcomming WebComponents使用shadow DOM。如果您对实现感兴趣，可以查看Polymer项目及其来源，这些项目大量使用了Shadow DOM。

角度模板中的＃shadow-root

1 个答案: