是否可以通过父文档访问Shadow DOM元素？ [英] Is it possible to access Shadow DOM elements through the parent document?

问题描述

这个问题更多的是针对用户创建的影子DOM元素，但对于辅助功能，我将针对此问题使用 date 输入类型：

例如我在我的页面上输入了一个日期输入。在编辑了几个位之后，此DOM的阴影DOM标记（使用Chrome）如下所示：

 <输入类型= 日期 > 
＃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> 
  

与日期关联的方法和属性输入似乎根本没有引用阴影DOM（ JSFiddle ），所以我想知道如何（如果这些影子DOM元素可以被访问吗？

解决方案

int32_t 根据定义，Shadow DOM是一种用DOM填充节点的方法，你想要从外部源隐藏它（封装）。关键是你作为组件作者可以选择哪些部分将被暴露给外部的CSS或JavaScript，哪些不会。

不幸的是，你不能创建一个公共的JavaScript接口到您的Shadow DOM，而不使用另一个叫做自定义元素的流血边缘规范。如果您选择这样做，就像向元素的原型中添加自定义公共方法一样简单。通过这些，您可以访问Shadow DOM的内部（请参阅第三个示例此处）。然而，您可以暴露CSS的钩子，以便在不使用自定义元素的情况下访问Shadow DOM的内部元素。有两种方法可以做到这一点：

1. 伪元素


2. CSS变量

伪元素

Chrome和Firefox将其Shadow DOM的某些部分暴露给CSS特殊的伪元素。 以下是 date 输入的示例，并添加了CSS规则它仅适用于通过使用Chrome提供的 -webkit-datetime-edit 伪元素的日期字段的数字部分。

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

组件创作者也可以创建自己的伪元素来公开其部分Shadow DOM（参见第二个示例这里）。

CSS变量

更好的方法是使用CSS Variables，您可以使用在中启用实验性WebKit功能来启用about：flags 在Chrome中。然后查看这个小提琴，它使用CSS变量向Shadow DOM传递它应该用于主题的颜色。

This question is more aimed at user-created shadow DOM elements, but for accessibility I'll use the date input type for this question:

Say for example I have a date input on my page. With a couple of bits edited out, the shadow DOM markup for this (using Chrome) looks something like:

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

The methods and properties associated with the date input do not appear to reference the shadow DOM at all (JSFiddle), so I was wondering how (if at all) can these shadow DOM elements be accessed?

解决方案

int32_t is right in that Shadow DOM, by definition, is a way to fill a node with DOM that you want to hide from external sources (Encapsulation). The point is that you as the component author get to choose exactly which parts will be exposed to outside CSS or JavaScript and which will not.

Unfortunately, you cannot create a public JavaScript interface to your Shadow DOM without using another bleeding-edge spec called Custom Elements. If you choose to do that, it's as simple as adding custom public methods to your element's prototype. From these you can access the internals of your Shadow DOM (see the third example here).

You can, however, expose hooks for CSS to access the internals of your Shadow DOM without using Custom Elements. There are two ways to do that:

1. Pseudo-elements
2. CSS Variables

Pseudo-elements

Chrome and Firefox expose certain parts of their Shadow DOM to CSS through special pseudo-elements. Here's your example of the date input with the addition of a CSS rule that only applies to the numerical part of the date field through use of the Chrome-provided -webkit-datetime-edit pseudo-element.

Here's a partial list of the available WebKit pseudo-elements. You can also just enable the Show Shadow DOM option in DevTools and look for attributes named pseudo.

Component authors can also create their own pseudo-elements to expose parts of their Shadow DOM (see the 2nd example here).

CSS Variables

An even better way is to use CSS Variables, which you can enable with Enable experimental WebKit features in about:flags in Chrome. Then check out this fiddle which uses CSS Variables to communicate to the Shadow DOM what color it should use for its "theme."

这篇关于是否可以通过父文档访问Shadow DOM元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！