如何访问阴影根内部的元素

编程问答 2022-06-06

问题描述

如何访问暗影根内部的元素？

<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 元素的样式，但是我不知道如何访问该元素。

解决方法

对此没有简单的答案，因为您必须访问非常深的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元素的数量看起来像是建筑上的错误

htmljavascriptlit-elementvaadin