Get ID of custom element in javascript [duplicate]

Question

I am creating a tampermonkey script for Google Earth that will hide the toolbar when you press a key. One of the elements that is supposed to be hidden looks like this:

<earth-toolbar id="toolbar" role="toolbar">...</earth-toolbar>

I am trying to hide it using this code:

document.getElementById('toolbar').style.display = 'none'

Note that it also does not work in the console.

However, I get this error.

Uncaught TypeError: Cannot read property 'style' of null at HTMLDocument.eval

Is it possible to access a custom element without modifying the code that actually created it, and if so what is it?

Answer 1

The #toolbar is within a #shadow-root, so you must access the .root property of that parent in order to find elements inside of it:

document.querySelector('earth-app').root.querySelector('#toolbar').style.display = 'none';

https://earth.google.com/web/