小编典典

是否可以通过父文档访问Shadow DOM元素?

javascript

这个问题更针对于用户创建的影子DOM元素,但是为了可访问性,我将使用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元素?


阅读 470

收藏
2020-05-01

共1个答案

小编典典

根据定义,@ int32_t在该ShadowDOM中是正确的,它是一种用要从外部源隐藏的DOM填充节点的方法(封装)。关键是您作为组件作者可以准确选择哪些部分将暴露于外部CSS或JavaScript,而哪些则不会。

不幸的是,如果不使用另一个称为CustomElements的最新规范,就无法为ShadowDOM创建公共JavaScript接口。如果选择这样做,就像在元素的原型中添加自定义公共方法一样简单。通过这些,您可以访问ShadowDOM的内部结构。

但是,您可以公开CSS的钩子,以在不使用自定义元素的情况下访问Shadow DOM的内部。有两种方法可以做到这一点:

  1. 伪元素
  2. CSS变量

伪元素

Chrome和Firefox通过特殊的伪元素将ShadowDOM的某些部分暴露给CSS。这是您的date输入示例,其中添加了CSS规则,该规则仅通过使用Chrome提供的-webkit-datetime-edit伪元素应用于日期字段的数字部分。

这是可用的WebKit伪元素的部分列表。您也可以仅ShowShadowDOM在DevTools中启用该选项,然后查找名为的属性pseudo

组件作者还可以创建自己的伪元素来公开其ShadowDOM的一部分

CSS变量

一个更好的方法是使用CSS变量,你可以启用EnableexperimentalWebKitfeaturesabout:flagsChrome浏览器。然后检查,它使用CSS变量与ShadowDOM交流其“主题”应使用的颜色。

2020-05-01