今日ハマったのでメモ。
Reactはバージョン16から要素に好きに属性を生やせます
Reactはバージョン16からカスタム属性の利用を認めています。
たとえば、下記のような属性指定ですね。
<a mycustomattr="customvalue">foobar</a>
上記の場合だときちんと mycustomattr="customvalue" が実際のDOMにレンダリングされます。
もともとReactでは、HTML公認のカスタム属性である data-** や、幅広い語彙を持つ aria-** は利用を認められていたのですが、その他の自作の属性、あるいはHTML5でいなくなった古い属性(e.g. <td> 要素の align 属性)は、カスタム属性が使えないと表現できません。
emotionのStyled Componentsはそのままだとカスタム属性をはたき落とします
そして本題ですが、タイトルの通りemotionのStyled Componentsは、デフォルトでカスタム属性をはたき落とします。
たとえば、
const CustomElem = styled.div`
color: red;
`
// @ts-ignore
return <CustomElem mycustomattr="customvalue">Hello</CustomElem>
(@ts-ignore はTypeScriptさんが mycustomattr なんてないよ！とエラーを出すのを抑制するために入れています。JSの人は要りません。)
上記のコードだと mycustomattr がはたき落とされます。基本的には、is-prop-validという実装に従って、HTMLに無さそうな属性は自動的に消してくれるようです。
今までのReactであれば、存在しない属性を渡すと警告を出していたので、特に自前propsが無意識に渡されて警告が出がちなStyled Componentsにおいては重要な機能と言えるでしょう。
emotionでカスタム属性を通す方法
ただ、当然このままだと困るケースもあるわけで、じゃあそういう場合はどうするかというと、ドキュメントに書いてあるとおり（←最初からちゃんとドキュメントを読めよ！）、 shouldForwardProp を指定して、自分のカスタム属性を通してあげましょう。
const CustomElem = styled("div", {
// mycustomattr と children（子要素） のみ許可する
shouldForwardProp: (props) => ["mycustomattr", "children"].includes(props)
})`
color: red;
`
// @ts-ignore
return <CustomElem mycustomattr="customvalue">Hello</CustomElem>
ちゃんと結果のDOMに mycustomattr がいるはずです。逆に、他の属性を渡しても何もDOMに影響しないはずです。