CSS @scopeのサンプル

red

blue

red

<div class="red">
  <p>red</p>
  <div class="blue">
    <p>blue</p>
    <div class="red">
      <p>red</p>
    </div>
  </div>
</div>
@scope (.red) {
  :scope {
    background: pink;
  }

  p {
    color: red;
  }
}

@scope (.blue) {
  :scope {
    background: cyan;
  }

  p {
    color: blue;
  }
}

元記事を表示する