CODEWITHSUNDEEP
javascripthtmlchromiumshadow-dom
pythonNovice
pythonNovice

Reputation: 1431

How can I interact with browser-inserted Shadow DOM content in an input field?

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.

enter image description here

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.

Upvotes: 2

Views: 4873

Answers (3)

bobbybobbobbed
bobbybobbobbed

Reputation: 191

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

Upvotes: 2

Ryan Wheale
Ryan Wheale

Reputation: 28410

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 component 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 comes to using form fields, my rule of thumb is to always follow one of these rules:

  1. Use the browser form fields as they come - 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.

  1. 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.

Upvotes: 3

Shanimal
Shanimal

Reputation: 11718

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.

enter image description here

This should make the shadowroot visible

Now you can see the shadowDom

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

Upvotes: 2

Related Questions