ViewEncapsulationのフォールバック

ブラウザがShadow DOMを実装している場合はViewEncapsulation.Nativeを、 そうでない場合はデフォルトのViewEncapsulation.Emulatedを使うようにフォールバックを実装する方法。

Shadow DOM Check

まずアプリケーション全体で統一のViewEncapsulationを使うためにコンフィグ用のdefault-view-encapsulation.tsを用意します。 よくよく調べるとAngular2のNativeはShadow DOM v1ではないようだけど、 BrowserDomAdapter経由で調べるのでAngular側がいつv1準拠になっても大丈夫にしてある。

import {ViewEncapsulation} from "angular2/core";
import {BrowserDomAdapter} from "angular2/platform/browser";

let domAdapter = new BrowserDomAdapter();

export var DEFAULT_VIEW_ENCAPSULATION = domAdapter.supportsNativeShadowDOM() ?
    ViewEncapsulation.Native : ViewEncapsulation.Emulated;

ChromeとSafariでしか見てないけどChromeのほうが若干初期ロードが速い気がする。 SharedStyleを使わない分JSでの処理が少ないだろうことは予想できる。