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

Question

这个问题更多地针对用户创建的影子 DOM 元素，但为了可访问性，我将对这个问题使用 date 输入类型:

例如，我的页面上有一个 date 输入。删除了几位后，此(使用 Chrome)的影子 DOM 标记如下所示:

<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 是正确的，根据定义，Shadow DOM 是一种用 DOM 填充节点的方法，您希望从外部源 (Encapsulation) 中隐藏它。关键是，作为组件作者，您可以准确选择哪些部分将暴露给外部 CSS 或 JavaScript，哪些不会。

不幸的是，如果不使用另一个称为 Custom Elements 的前沿规范，您就无法为 Shadow DOM 创建一个公共(public) JavaScript 接口(interface)。 .如果您选择这样做，就像将自定义公共(public)方法添加到您的元素的原型(prototype)一样简单。从这些您可以访问 Shadow DOM 的内部结构(参见第三个示例 here )。

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

1. 伪元素
2. CSS 变量

伪元素

Chrome 和 Firefox 通过特殊的伪元素将 Shadow DOM 的某些部分暴露给 CSS。 Here's您的 date 输入示例添加了一个 CSS 规则，该规则通过使用 Chrome 提供的 -webkit-datetime-edit 仅适用于日期字段的数字部分> 伪元素。

Here's可用 WebKit 伪元素的部分列表。您还可以在 DevTools 中启用 Show Shadow DOM 选项并查找名为 pseudo 的属性。

组件作者还可以创建他们自己的伪元素来公开他们的 Shadow DOM 的一部分(参见第二个示例 here)。

CSS 变量

更好的方法是使用 CSS 变量，您可以在 Chrome 的 about:flags 中通过 Enable experimental WebKit features 启用它。然后查看this fiddle它使用 CSS 变量与 Shadow DOM 交流它应该为其“主题”使用什么颜色。