这个问题更针对于用户创建的影子DOM元素,但是为了可访问性,我将使用date此问题的输入类型:
date
举例来说,我date在页面上输入了内容。修改了几位后,此阴影DOM标记(使用Chrome)看起来像:
<input type="date"> #document-fragment <div pseudo="-webkit-datetime-edit"> <div pseudo="-webkit-datetime-edit-fields-wrapper"> <span role="spinbutton">dd</span> <div pseudo="-webkit-datetime-edit-text">/</div> <span role="spinbutton">mm</span> <div pseudo="-webkit-datetime-edit-text">/</div> <span role="spinbutton">yyyy</span> </div> </div> <div></div> <div pseudo="-webkit-calendar-picker-indicator"></div>
与date输入关联的方法和属性似乎根本没有引用影子DOM(JSFiddle),所以我想知道如何(如果有的话)访问这些影子DOM元素?
根据定义,@ int32_t在该ShadowDOM中是正确的,它是一种用要从外部源隐藏的DOM填充节点的方法(封装)。关键是您作为组件作者可以准确选择哪些部分将暴露于外部CSS或JavaScript,而哪些则不会。
不幸的是,如果不使用另一个称为CustomElements的最新规范,就无法为ShadowDOM创建公共JavaScript接口。如果选择这样做,就像在元素的原型中添加自定义公共方法一样简单。通过这些,您可以访问ShadowDOM的内部结构。
但是,您可以公开CSS的钩子,以在不使用自定义元素的情况下访问Shadow DOM的内部。有两种方法可以做到这一点:
Chrome和Firefox通过特殊的伪元素将ShadowDOM的某些部分暴露给CSS。这是您的date输入示例,其中添加了CSS规则,该规则仅通过使用Chrome提供的-webkit-datetime-edit伪元素应用于日期字段的数字部分。
-webkit-datetime-edit
这是可用的WebKit伪元素的部分列表。您也可以仅ShowShadowDOM在DevTools中启用该选项,然后查找名为的属性pseudo。
ShowShadowDOM
pseudo
组件作者还可以创建自己的伪元素来公开其ShadowDOM的一部分
一个更好的方法是使用CSS变量,你可以启用EnableexperimentalWebKitfeatures在about:flagsChrome浏览器。然后检查,它使用CSS变量与ShadowDOM交流其“主题”应使用的颜色。
EnableexperimentalWebKitfeatures
about:flags