javascriptdrop-down-menubrave

document.getElementById not working in brave settings

I am trying to select the dropdown of colours in brave settings. However, the console is not able to select the element.

enter image description here

It gives null when I run the command to select element by id.

enter image description here

This doesn't happen when I visit any other page on the browser. Only the settings page is giving this error.

An MRE would be running document.getElementById("braveThemeType") in developer tools with settings page (brave://settings/appearance) open.

Solution

  • That select element is inside several nested shadow doms on the page.

    In order to get a reference to elements inside a shadow dom you need to get a reference to the shadowRoot property first and query from there. For example if there was a shadow root on the <body> you would need to do

    document.body.shadowRoot.querySelector('someelement');

    So in your case the select on the brave settings page you have to go through several nested shadow doms to get the element.

    const themeSelect = document.querySelector('settings-ui').shadowRoot
    .querySelector('settings-main').shadowRoot
    .querySelector('settings-basic-page').shadowRoot
    .querySelector('[section=appearance] settings-appearance-page').shadowRoot
    .querySelector('settings-animated-pages settings-brave-appearance-theme').shadowRoot
    .querySelector('#braveThemeType')