如何访问阴影根深处的元素

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组合框项目元素的样式，但我不知道如何访问此元素。

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

我找不到在任意深度获取元素的答案。这就是我想到的；您可以使用排序函数递归地下降到shadow 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]