我怎样才能访问隐藏在阴影根部深处的元素？
<vaadin-combo-box>
#shadow-root
<vaadin-text-field id="input">
<vaadin-combo-box-dropdown-wrapper id="overlay">
#shadow-root(open)
<vaddin-combo-box-dropdown id="dropdown">
#shadow-root(open)
<vaddin-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元素。
为了减少一点痛苦，您必须创建一个access提供元素影子dom的函数，如下所示:
const getShadowRoot = (elem, selector) => elem.querySelector(selector).shadowRoot;
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');
然而，这么多的阴影元素看起来像是一个架构上的错误
