You cannot access a Shadow DOM created by the browser to display a control, that is called a #shadow-root (user-agent) in the Dev Tools. <input> is one example.
You can only access open custom Shadow DOM (the ones that you create yourself), with the { mode: 'open' } option.
element.attachShadow( { mode: 'open' } )
Update
It’s true for most UX standard HTML elements: <input>, <video>, <textarea>, <select>, <audio>, etc.
3rd party edit 2022
The following might help to illustrate the question. Give there is only 1 <input type=range> in the html document this code shows if its children can be accessed.
// returns 1 as expected since only one input element is in the document
document.querySelectorAll("input").length;
// get a reference to <input type=range>
var rangeInput = document.querySelector("input");
// Is it a shadowRoot?
// if null then either
// - it is not a shadowRoot OR
// - its elements can not be accessed (mode == closed)
console.log(rangeInput.shadowRoot); // returns null
The code above shows that the internals of an <input type=range> can not be accessed.
