Currently I am trying to set a function that will click on the little clock inside of <input type=time> but am unable to find the innerHTML of the tag to find the clock.

This is what I want to do:

html

<input id='timeInput' type='time'/>

JS

document.getElementById("timeInput").children('clockIcon').click()

But when I run a document.getElementById('timeInput').innerHTML I get null.

I believe that this has something to do with the Shadow DOM, but have been unable to find the information about the shadow DOM input.

I have previously been able to check the hidden browser HTML, but am unable to find that previous resource. Any ideas?

To specify, my app only shows on Chrome and Opera browsers since it is a Chrome extension.

Currently I am trying to set a function that will click on the little clock inside of <input type=time> but am unable to find the innerHTML of the tag to find the clock.

This is what I want to do:

html

<input id='timeInput' type='time'/>

JS

document.getElementById("timeInput").children('clockIcon').click()

But when I run a document.getElementById('timeInput').innerHTML I get null.

I believe that this has something to do with the Shadow DOM, but have been unable to find the information about the shadow DOM input.

I have previously been able to check the hidden browser HTML, but am unable to find that previous resource. Any ideas?

To specify, my app only shows on Chrome and Opera browsers since it is a Chrome extension.

• javascript
• html
• chromium
• shadow-dom

• 2 From the documentation you can see that not all browsers have this clock icon in the input. Using document.getElementById('timeInput').focus() you can get the user inside the <input> if that helps? – Philip Commented Sep 22, 2021 at 20:26
• 1 if you use an input, i suggest you adding a name tag to it, it makes targetting easier by the querySelector as in document.querySelector('input[name="inputname"]').click selecting the clock itself is tricky, your innerhtml will not work, since there is nothing within the input tag itself. i would prefer to add actually a true clock icon to it, rather than letting a browser solve your problem, cause each browser handles the input type time different – Dorvalla Commented Sep 22, 2021 at 20:31
• 1 As a side note: <input type="time"> is not supported by all browsers.. So to make it easier and cross-browser, I would suggest (as did @Dorvalla) creating a custom bination of <input type="text"> or <select> with custom interaction to make it the same on all browsers and being able to control the interaction more precise. – Philip Commented Sep 22, 2021 at 20:38
• 1 Does this answer your question? How to view html and css associated with shadow dom – Shanimal Commented Sep 22, 2021 at 21:04
• 1 Will document.getElementById('timeInput').shadowRoot return anything? If no, then you need to open shadow DOM. developer.mozilla/en-US/docs/Web/Web_Components/… – Rickard Elimää Commented Sep 22, 2021 at 23:37

3 Answers 3

There's no way to interact with the shadow DOM. The whole purpose of a shadow tree is to isolate functionality, behavior, and styles from the outside world - even if the mode is "open". If the author of a particular ponent wants you to be able to control the behavior or styles, they will provide an API for doing so. If the author does not provide an API for it, they don't want you mucking around with it.

When it es to using form fields, my rule of thumb is to always follow one of these rules:

1. Use the browser form fields as they e - don't try to get too fancy with it as you will likely break accessibility, keyboard navigation, autofill and other things you didn't intend to break. Anything more than styling the borders, background, and padding is usually not a good idea. You might think it is, but I can likely prove you wrong by showing how you broke some default behavior.

For example, automatically displaying a time picker would take focus away from what the user was doing. Maybe the screen reader was reading some text, or a power user was tabbing through the navigation using their keyboard, and then all the sudden they're on the time picker when they didn't want to be.

2. Use a widely tested UI library. The authors of popular UI libraries have taken into account all of the behaviors and such so as to provide a smooth and predictable experience for users. Use these when you want to do things like automatically display a date/time picker or some other fancy behavior you probably shouldn't be doing but are going to anyways.

Whatever you do, don't try to roll your own fancy form controls. I guarantee you will piss off one of your users.

If you want to view the shadowDom in Chrome DevTools, you have to turn it on in the Settings under Elements section. You can't programmatically interact with the element except through the elements attributes and event handlers.

This should make the shadowroot visible

You can add change and input and event listeners to the ponent itself, but not the elements of the shadowDom.

There is a way to interact with open shadow doms with pure js, for things like clicking

Example:

document.querySelector("shadowRootsCss").shadowRoot.querySelector("#timeInput").click()

If you use google chrome, inspect and find the element, on that element, click: copy js path

You'll then have the path you need to click