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

【问题标题】：How to access an element deep inside shadow-root如何访问 shadow-root 深处的元素
【发布时间】：2021-02-06 16:11:22
【问题描述】：

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

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

【问题讨论】：

我在其中看到了一些部件属性...你能要求 Vaadin 导出这些 CSS 部件，以便在不刺穿阴影根的情况下设置它们的样式吗？
为了设置 vaadin-combo-box-item 的样式，您可能还需要考虑使用 ComponentRenderer（请参阅 vaadin.com/components/vaadin-combo-box/java-examples/…）。

标签： javascript html css vaadin lit-element

【解决方案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 元素看起来像是架构错误

【讨论】：

你确定这是正确的吗？因为当我使用vaadinComboBoxItem.style.background = "green" 时，什么都没有发生
我认为它会是 elem.shadowRoot.querySelector(selector)
函数getShadowRoot每次都返回shadowRoot属性，所以你不必每次都访问它。也许<vaadin-combo-box> 的父级不是body 也是shadow root？
的父级也是影子根
<vaadin-dialog-overlay> #shadow-root ......... <vaadin-combo-box> ........