この記事は、CAM Advent Calendar 25日目の記事です。
前回は Jung0 さんの Androidアプリでのエラー処理について を紹介しました。

自己紹介

今年の4月からフロントエンジニアとして働いています、kidoyuna です。
学生時代はデータ分析を勉強していたのですが、アイドルが好きすぎたため、
アーティストファンサイトを展開している今の会社に入社することを決めました。
Web 未経験でしたが、周りに助けられながら日々奮闘中です。

前提条件

自分用メモでもある、Edge 戦記です。

ちなみに、Webcomponents を使用したプロジェクトでのお話です。
これについては、2日目 MuuKojima さんの
Web Components入門: フルに導入されたプロジェクトに入った結果とサンプル実装をご覧ください。

ShadowDOM が関係してくるので、まずは各ブラウザの対応状況から。
2019年12月現在 Firefox, Chrome, Opera は対応済み。Safari は一部バグあり。IE と Edge は未対応です。
そのため、幅広いブラウザに対応するには Webcomponents の Polyfill の利用が必要となります。

Polyfill について

Polyfill とは、Webcomponents のような最新技術に未対応のブラウザのために、
現在搭載されている機能でほぼ同等の機能を展開してくれるライブラリです。ありがたい...

Webcomponents の大きな特徴の1つである ShadowDOM とは、DOM を外から見えないようにカプセル化するというものです。
これを Polyfill で再現したものが ShadyDOM です。

ShadyDOM も ShadowDOM 同様、カプセル化されているので普通に考えれば外からスタイルを当てることはできません。
それを可能にする Polyfill が、ShadyCSSです。

バグ1つ目

上記の ShadyCSS を使用してバグが発生しました。

公式の README には以下のようにあります。（日本語のコメントは筆者が追加しました）

<my-element>
  <!-- shadow-root -->
  <style>
    :host {
      display: block;
    }
    #container slot::slotted(*) {
      color: gray;
    }
    #foo {
      color: black;
    }
  </style>
  <div id="foo">Shadow</div>
  <div id="container">
    <slot>
      <!-- span distributed here -->
    </slot>
  </div>
  <!-- /shadow-root -->
  <span>Light</span> // このspanごと、上のslotタグが置き換わる
</my-element>

becomes:

<style scope="my-element">
  my-element {
    display: block;
  }
  #container.my-element > * {
    color: gray;
  }
  #foo.my-element {
    color: black;
}
</style>
<my-element>
  <div id="foo">Shadow</div>
  <div id="container">
    <span>Light</span> // slotがあったところにspanが入った状態
  </div>
</my-element>

Selector scoping
You must have a selector for ascendants of the <slot> element when using the ::slotted pseudo-element.
You cannot use any selector for the <slot> element. Rules like .foo .bar::slotted(*) are not supported.

と、あるので
slot されたあとのものにスタイルを当てようと思ったら

親Element slot::slotted(*) {

のようにすべきだと思いました。公式が言ってるんだもん。
しかし、スタイルが当たらない...。なんでやねん！

そこで、同プロジェクトの2年目の先輩が

「レンダリングされたあと slot タグないし、もしかしたらさあ...」

と以下の記述を提案しました。

親Element ::slotted(*) {

効きました！

ちなみに、標準で ShadowDOM が実装されている Chrome などでは

::slotted(*) {

のみで問題ないです。はぁ...

バグ2つ目

次からは ShadyDOM はおそらく関係ないバグです。

CSSプロパティの color や background-color などに使用できる値 currentColor についてです。

currentColor

こちらは、親ブロックで指定した色がそのまま使える便利なやつです。
例えば、アイドルのメンバーカラーによって文章の枠色を変えたいとき、ありますよね。

See the Pen currentColor by Kido Yuna (@kidoyuna) on CodePen.

padding: calc(var(--font-small) / 2);

padding: calc(calc(var(--base-font-size) * 0.8) / 2);

padding: calc(calc(16px * 0.8) / 2);

padding: calc((var(--base-font-size) * 0.8) / 2);