how do you access an element deep inside shadow root?

There’s no easy answer to that because you have to access a very deep DOM element.

To make it little bit less painful you have to make a function which access provided shadow dom of element like this:

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');

Nevertheless, this amount of shadowDom elements looks like an architectural mistake