I actually acomplished what I wanted to do: hiding some webkit pseudo-elements from the page when I want to print it, the code looks like below.

The problem is that I didnt learn anything from my research to do tha and I couldn't find any documentation about it, and every answer I saw about this topic only shows the code, without any further explanation.

::-webkit-resizer,
::-webkit-calendar-picker-indicator {
    display: none; 
    -webkit-appearance: none;
}

Some sources:

• https://developer.mozilla.org/en-US/docs/Web/CSS/WebKit_Extensions

  • This one show some extensions, but the callendar one is not listed here and I wasn't able to find elsewhere.

• https://gist.github.com/afabbro/3759334

  • This gist has a lot of those pseudo elements, classes or properties, but the guy who did it didnt explain how he have acomplished that, and those doenst show on my dev tools.

• Use pseudo classes for selecting webkit pseudo elements

  • This guy talks about the shadow-dom, I didnt heard of it before, but on my research I couldn't understand how it would help-me.

Some similar answers: 6195329, 11418289, 17340038, 15530850, 53483852

Also visited the wikipedia article and this site: https://webkit.org/

I really want to understand the concept behind this webkit things and any help would be appeciated.

To be more specific: if any time in the future I want to override a component, how can I know what pseudo-element has being aplied on an compnonet given the browser?