placeholderが表示されないinputにplaceholderを表示させる

## この記事について
`type="date"`にplaceholderを指定しているのに表示されず困った事があったので、その原因と解決方法や調査結果をまとめた記事です。

### placeholderが表示されなかったコード

```html:index.html
<input type="date" placeholder="placeholder">
```

## 解決したコード
疑似要素を使うと表示できるようになります↓
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="kena-nk" data-slug-hash="qBaJvdd" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="qBaJvdd">
  <span>See the Pen <a href="https://codepen.io/kena-nk/pen/qBaJvdd">
  qBaJvdd</a> by kena-nk (<a href="https://codepen.io/kena-nk">@kena-nk</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 解決方法の詳細
まず疑似要素の`before`で``content: attr(placeholder);``を使いplaceholderに設定された文字列を受け取ります。

そしてShadow DOMで作られた要素の`div`の`pseudo`に指定されていた``-webkit-datetime-edit-fields-wrapper``と``-webkit-calendar-picker-``を``display: none``に設定したら完成！
![スクリーンショット 2021-01-13 21.50.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603107/f9604308-05bb-6b1a-fe13-cc903ce39330.png)

### Shadow DOMについて
通常のDOMツリーの下に隠れているDOMになります。検証ツールで見ても表示されないので、確認するにはShadowDOMを見る設定オンにする必要があります。

Chromeで確認する場合は以下の流れでONにできます↓
検証ツールを開く > 歯車マーク > Preferences > Elements > 「Show user agent shadow DOM」にチェックをつける


> Shadow DOM により、通常の DOM ツリーの要素の下に DOM ツリーを追加し隠すことができます。
shadow DOM ツリーは shadow root を根とし、その下には普通の DOM ツリーと同様に任意の要素を追加できます。
![shadow-dom.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603107/d90f9851-57d4-bff3-2561-806eaaa21924.png)
ソース：https://developer.mozilla.org/ja/docs/Web/Web_Components/Using_shadow_DOM


### placeholderが表示されない原因
placeholder属性がそのtypeで対応されていない属性であるためです。
調査したところ、以下のtypeはplaceholder属性には対応していませんでした。

- date（未対応ブラウザ：Safari,IE）
- month（未対応ブラウザ：FireFox,Safari,IE）
- week（未対応ブラウザ：FireFox,Safari,IE）
- time（未対応ブラウザ：Safari,IE）
- datetime-local（未対応ブラウザ：FireFox,Safari,IE）

未対応ブラウザでは`type="text"`の表示になるためplaceholderは表示されます。

> 入力欄のユーザーインターフェイスは、一般にブラウザーによってまちまちです。詳細はブラウザーの互換性を参照してください。対応していないブラウザーでは、このコントロールは単純な ``<input type="text"> ``に格下げされます。

>ソース：https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/date


<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="kena-nk" data-slug-hash="gOwBexv" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="gOwBexv">
  <span>See the Pen <a href="https://codepen.io/kena-nk/pen/gOwBexv">
  gOwBexv</a> by kena-nk (<a href="https://codepen.io/kena-nk">@kena-nk</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## まとめ
無理して`type="date"`を使ってplaceholderを表示させずに、divで作るか`type="text"`で作成した方が簡単そうだなと感じた。

気になったのが、Shadow DOMで作られた属性に指定されている`pseudo`は一体なんなのか、、
MDN調べても[疑似要素](https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-elements)や[疑似クラス](https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-classes)の記事しか見当たらずもやもや:frowning2:

ShadowDOMで作られた疑似要素にはくっ付いてくるお約束でもあるのかな、、、


## 参考記事
https://developer.mozilla.org/ja/docs/Web/CSS/attr()
https://qiita.com/alangdm/items/cec32f21151a9da3c3f2