More than 5 years have passed since last update.

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

Last updated at 2019-10-09Posted at 2019-04-03

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」というもので構成されているからです。

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

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

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

なんか見たことないDOMがあるーーー！！
内側のdivにスタイル付いてるーー！！！

こんな感じで見ることができます。
placeholderは実はShadow DOMであるdivにテキストを渡して実装しているようですね。

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