◆ style タグの scoped 属性が使えなくなってた
◆ CSS の適用する範囲を制限できた
  ◆ scoped 付き style タグの親以下
◆ shadow DOM が代わりと言われても扱いづらいし まだドラフトで実装してるのが少ないし

ここで軽く触れましたが 便利なものです
ですが 調べてみたら Chrome では使えなくなってるようです

使えなくなったのは 35 からなので けっこう前みたいです
唯一使える Firefox も特殊な設定必要みたいです

HTML 周りの使用って使えなくなるのが多すぎですよね
便利なのは残しておいてもらいたいです

いくら shadow DOM が代わりになると言っても 手軽さではこっちのほうがよかったです

一応どんなものだったか

css を書くための style タグの適用範囲を制限できます

普通に style タグを全体 (frame は別ページ扱いなので除く)が対象でした
それを この div 以下だけを対象にしたいっていうのができる機能です

使い回すパーツで メニュー部分だったりカレンダーだったりとたくさんの要素を使って作っているものだと ひとつひとつに css で
.menu .abc{}
.menu table td:nth-child(n+2){}
.menu div.xyz{}
.menu input[type="checkbox"]{}
みたいな繰り返し .menu をつけて 影響範囲を制限することがありますが 全てに書いていくのは辛いです

そういうときに活躍するはずだったのですが 廃止です
動かないけどサンプル
<body>
    <div>
        <style scoped>*{color:red;}</style>
        <p>a</p>
        <p>b</p>
        <p>c</p>
    </div>
    <div>
        <style scoped>*{color:blue;}</style>
        <p>e</p>
        <p>d</p>
        <p>f</p>
    </div>
    <div>
        <style>*{font-size:30px;}</style>
        <p>g</p>
        <p>h</p>
        <p>i</p>
    </div>
</body>

a,b,c の範囲だけ赤色で e,d,f は青色になるはずです
適用範囲は scoped 付き style の親要素以下です

font-size は scoped のない style タグなので全部に有効です
a,b,c,e,d,f はそれぞれの色で 30px のサイズの文字になるはずです

scoped style タグは兄弟要素やそれ以下にスタイルをあてたいというところに書くといい感じになります

外部 css を読み込む link に scoped の仕様が決まる前に廃止の方向になってきたのか link にはないみたいです

shadow DOM

かわりの CSS の適用範囲を決めれるのには shadow DOM がありますが いまだに Draft 段階ですし Chrome は使えますが Firefox が確かまだ使えなかったと思います

scoped に比べると 複雑ですし css のためではなく DOM をまとめて外から直接みえないようにしてるものです
また JavaScript からすると shadow の内外でわけられてなく共通で イマイチな感じです
shadow の中なのに 同じ shadow 内の要素取得が面倒だったりでパーツ化してる部分を簡単に使い回すというのはちょっとやりづらいです

DOM を分けるなら css や JavaScript も含めて綺麗にわけて iframe のもっと扱いやすい版にしてほしいですし 無理なら単純に CSS で簡単にスコープ決めて扱えるようになってほしいです


それにしても blink はどんどん非推奨なもの増やし過ぎ感がありますよね