如何访问阴影根目录中的元素

Question

如何访问深埋在阴影根目录中的元素？

<vaadin-combo-box>
        #shadow-root
            <vaadin-text-field id="input">
                <vaadin-combo-box-dropdown-wrapper id="overlay">
                    #shadow-root(open)
                        <vaadin-combo-box-dropdown id="dropdown">
                            #shadow-root(open)
                                <vaadin-combo-box-overlay id="overlay">
                                    #shadow-root(open)
                                     <div part="overlay" id="overlay">
                                        <div part="content" id="conent">
                                            #shadow-root(open)
                                                <div id="scroller">
                                                    <iron-list id="selector">
                                                        #shadow-root(open)
                                                            <vaadin-combo-box-item>
                                                                ......

我想设置vaadin-combo-box-item元素的样式，但我不知道如何访问这个元素。

Answer 1

这不是一个简单的答案，因为您必须访问一个非常深的DOM元素。

为了减轻一些痛苦，您必须创建一个函数，该函数提供了这样一个元素的阴影：

const getShadowRoot = (elem, selector) => elem.shadowRoot.querySelector(selector);

const vaadinComboBox = getShadowRoot(document, 'vaadin-combo-box');
const vaadinTextField = getShadowRoot(vaadinComboBox, '#input');
const vaadinComboBoxWrapper = getShadowRoot(vaadinTextField, '#overlay');
const vaadinComboBoxDropdown = getShadowRoot(vaadinComboBoxWrapper, '#dropdown');
const vaadinComboBoxOverlay = getShadowRoot(vaadinComboBoxDropdown, '#overlay');
const vaadinComboBoxContent = getShadowRoot(vaadinComboBoxOverlay, '#conent');
const vaadinComboBoxSelector = getShadowRoot(vaadinComboBoxContent, '#selector');
const vaadinComboBoxItem = getShadowRoot(vaadinComboBoxContent, 'vaadin-combo-box-item');

然而，这么多的shadowDom元素看起来像是一个架构错误。

Answer 2

我无法在任意深度找到一个元素的答案。这就是我想出的；您可以使用这个类型的函数递归地下降到阴影DOM中，以获取父元素或元素本身：

function* descend(el, sel, parent) {
        if (el.matches(sel)) {
            yield parent ? el.parentElement : el;
        }
        if (el.shadowRoot) {
            for (const child of el.shadowRoot.children) {
                yield* descend(child, sel, parent);
            }
        }
        for (const child of el.children) {
            yield* descend(child, sel, parent);
        }
    };

示例使用：

const vid = [...descend(window.parent.document.querySelector("body"), "video", false)][0]