如何访问 shadow-root 深处的元素

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 元素。为了让它不那么痛苦，你必须创建一个函数来访问提供元素的影子 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) {&nbsp; &nbsp; &nbsp; &nbsp; if (el.matches(sel)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; yield parent ? el.parentElement : el;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; if (el.shadowRoot) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (const child of el.shadowRoot.children) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; yield* descend(child, sel, parent);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; for (const child of el.children) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; yield* descend(child, sel, parent);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; };使用示例：const vid = [...descend(window.parent.document.querySelector("body"), "video", false)][0]