5

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?

Improve this question
2
  • try to debug, try to run document.getElementById('toolbar'), check what it returns, an element ! or not!! Commented Apr 29, 2019 at 2:57
  • @DupinderSingh I tried it and it throws the same error. >Note that it also does not work in the console. Commented Apr 30, 2019 at 0:56

1 Answer 1

Reset to default
4

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/

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks for telling me what the shadow DOM is!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.