如何解决如何访问阴影根内部的元素
如何访问暗影根内部的元素?
<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元素的数量看起来像是建筑上的错误
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。