HTML5のstyle要素が持つscoped属性について

Category
HTML5
Bookmark

HTML5のstyle要素には、scopedという属性があります。 この属性を持ったstyle要素は、フローコンテンツが期待できる場所に記述する事ができます（フローコンテンツの中って意味じゃ無いです）。

フローコンテンツには、div要素やsection要素やtable要素などがあります（詳しくはコンテンツ・モデル - HTML5タグリファレンス - HTML5.JPとか見てください）。

scoped属性を指定したstyle要素に記述されたスタイルは、ページ全体ではなく、そのstyle要素の親要素の中にあるコンテンツにのみ適用されます。 以下がサンプルコードです。

  <p>example text</p>     <!-- 赤くならない -->
<section>
  <style scoped="scoped">
  p {
    color: red;
  }
  </style>
  <h1>example title</h1>
  <p>example text</p>     <!-- 赤くなる -->
</section>

scope属性のメリット

ここまでをまとめると、scoped属性の嬉しい点は二つあります。

  1. スコープを持てる
  2. フローコンテンツが期待できる場所に書ける

この内、スコープに関しては、現在で実装はないようです。

もう一つのメリット、フローコンテンツが期待できる場所（フローコンテンツが書ける場所）に書ける事が地味に便利な予感がしていて、例えばブログの記事内でちょっとしたサンプルを載せたい時なんかに使えるんじゃないかなと。 ただ、スコープの実装がない内には他の要素にまでスタイルが当たってしまう恐れがあるので、次のようにすると良いんじゃないかなとか。

scope属性をサポートしない環境へのフォールバック

  <p>example text</p>     <!-- 赤くならない -->
<section id="entryExample">
  <style scoped="scoped">
  #entryExample p {
    color: red;
  }
  </style>
  <h1>example title</h1>
  <p>example text</p>     <!-- 赤くなる -->
</section>

使いようによっては便利になりそうなscope属性ですが、乱用は保守性の低下を招くのでご利用は計画的にした方が良いかもしれないです。