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

Question

这个问题更针对于用户创建的影子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元素？

Answer 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变量，你可以启用EnableexperimentalWebKitfeatures在about:flagsChrome浏览器。然后检查，它使用CSS变量与ShadowDOM交流其“主题”应使用的颜色。