Edited at

placeholderに付いてるスタイルを見てみたい!【Shadow DOM】


placeholder プロパティ

placeholder 使っていますか?

placeholder は input 要素のフォームの中等にテキストを入れておけるHTMLの属性ですね。

↓こんな感じ。


HTML

<input placeholder="キーワード入れて検索">


このテキストにスタイルを付けるときは以下のように擬似要素を使ってスタイルを付けてやります。


CSS

input::placeholder {

color: red;
font-size: 0.5rem;
font-style: italic;
}


スタイルを確認してみる

このスタイルをGoogle Chromeのデベロッパーツールで確認しようとすると…



>>>ない<<<

そう…ないのです。付いているはずのスタイルが見当たらない。

これは placeholder が「Shadow DOM」というもので構成されているからです。


Shadow DOM を見えるようにする

Chromeのデベロッパーツールで Shadow DOM を見えるように設定してみましょう。


1. 右上の「⋮」から「Settings」をクリック


2. 「Preference」→「Elements」で「Show user agent shadow DOM」にチェック!


Shadow DOM を見てみる

もう一度コードを見てみましょう。

image.png

なんか見たことないDOMがあるーーー!!

内側のdivにスタイル付いてるーー!!!

こんな感じで見ることができます。

placeholderは実はShadow DOMであるdivにテキストを渡して実装しているようですね。

他にも今まで見えていなかったものが見えるかも…👀


参考リンク