読者です 読者をやめる 読者になる 読者になる

この日記は私的なものであり、所属会社の見解ではありません。 GitHub: takahashikzn

Chrome49でShadow DOMの属性セレクタが効かなくなった

CSS

だいぶ前に、日付入力フォームの"年"、"月"、"日"をShadow DOMを用いて消す方法を紹介しました。

http://takahashikzn.root42.jp/entry/20130715/1373865102

要するにこのように指定すればOKです。(※Lessです)

::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field {
    &:not([aria-valuenow]) {
        color: transparent;
    }
}

しかし本日気がついたのですが、どうやらChrome49からはShadow DOMの要素を選択する際に属性セレクタを使えません。 こんな風になります。(デフォルトの表示)

f:id:takahashikzn:20160201195940p:plain

つまり、上記のセレクタがマッチしていないということ。

::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field {
    color: transparent;
}

のようにして属性セレクタを消すと有効になるので、属性セレクタが使えないということで間違いないようです。Chromeのバグかな?