How to inspect ::-webkit-datetime-edit in dev tools [duplicate]

Question

I use the ::-webkit-datetime-edit CSS property in order to control the appearance of a date input field for webkit browsers. To do further debugging, I would like to inspect it in my dev tools.

But when I inspect my element with Chrome dev tools, I can't see anywhere the css properties associated with ::-webkit-datetime-edit. Nor in the "Styles" panel or the "Computed" panel.

Here is my code:

<input type="date">

[type="date"]::-webkit-datetime-edit {
  background-color: red;
  color: transparent;
}

Here is a codepen: https://codepen.io/neiya/pen/jOERJQb

Is it possible to see and edit these properties with Chrome or other browser dev tools?

Answer 1

I just found the answer to my question on this post Inspect webkit-input-placeholder with developer tools

What I need to do is to enable 'Show user agent shadow DOM' in the Settings panel of Chrome Developer Tools. Now the properties are visible.