Get ID of custom element in javascript

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?

try to debug, try to run document.getElementById('toolbar'), check what it returns, an element ! or not!! — Dupinder Singh, Apr 29 '19 at 02:57
@DupinderSingh I tried it and it throws the same error. >Note that it also does not work in the console. — zbot473, Apr 30 '19 at 00:56

score 3 · Accepted Answer · answered Apr 29 '19 at 03:13

3

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/

answered Apr 29 '19 at 03:13

CertainPerformance

356,069
52
309
320

Thanks for telling me what the shadow DOM is! – zbot473 Apr 30 '19 at 01:00

Get ID of custom element in javascript

1 Answers1