CSSの適用スコープについて

Question

確認したいこと

下記のコードで、id=Aだけにスタイルを適用させたい場合に、
styleタグの属性またはメディアクエリ等でスコープを指定する方法は存在しますか？

<div>
  <div id="A">
    <p>1</p>
    <span>2</span>
  </div>
  <div id="B">
    <p>1</p>
    <span>2</span>
  </div>
</div>

  p {
    color: red;
  }
  span {
    color: blue;
  }

想定した目的

例えばサイトの一部にのみcssフレームワークを当てたい場合や、
外部からユーザー指定のcssを取り込んで適用させたい場合に
id=A以外に影響が及ばないようにするスマートなやり方がないかと探しています。

SASS等を使ってこのようにラッピングすればいいだけなのですが、
フロントサイドで実行するのはハードルが高く。

  #A p {
    color: red;
  }
  #A span {
    color: blue;
  }

試したこと

iframeのsrcdoc属性にhtmlごと挿入することで、
sandbox的にも良さそうだったのですが、iframeだと扱う上で不便でしたので、
これ以外に何かあればよろしくお願いします。

補足

目的は例であり、あくまで技術的な質問です。
セキュリティ的な観点は排他してご教示お願いいたします。

Answer 1

<style scoped>

scoped 属性は現行HTML仕様では廃止されています。

• 4.2.6 style要素 - HTML Standard 日本語訳
• <style>: スタイル情報要素 - HTML: HyperText Markup Language | MDN

Re: mahomaho さん

Comments

[退会済みユーザー]

ありがとうございます。廃止されてしまったのですね。
これからはshadow DOMなのかもしれませんね。