​​Примерно каждый день у людей всплывают вопросы вида: “А у input есть псевдоэлементы? А как стилизовать плейсхолдер? А как поменять стили стандартного видеоплеера?”

Ответ на эти вопросы — теневое дерево документа, Shadow DOM.

Что лучше всего умеет браузер? Правильно, оперировать блоками (даже не текстом, но об этом потом). Так зачем придумывать что-то новое, если можно сымитировать нужное поведение старыми добрыми div-ами, а саму реализацию скрыть от конечного пользователя? Это, конечно, очень грубое определение теневого дерева документа, но весьма точно отражающее суть.

Теперь перейдём к делу. В CSS-чате заметили, что Safari для элементов формы с плейсхолдером показывает в инспекторе два вложенных в input (!) div-а. Один это собственно плейсхолдер, а второй — contenteditable, т. е. непосредственно ввод данных. И если щёлкнуть на каждый, можно вполне себе получить нужные селекторы (см. тред: https://twitter.com/zavsievich/status/1250338154835410946?s=21).

Тем временем не все знают как такого же достичь в…

Created with Figma