<!-- without scoped attribute. Root html is the scope context. -->
<style>
  :scope {
  background-color: #009966;
  }
</style>
<div class="container">
  <section>
    <style scoped>
      :scope {
      background-color: black;
      color: white;
      }
    </style>
    <p>
      I'm inside the scope.
    </p>
  </section>
  <p>
    I'm outside the scope.
  </p>
</div>
body {
    color: #555;
    font-size: 1.1em;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

hr {
    margin: 50px 0;
}

.container {
    margin: 40px auto;
    max-width: 700px;
    background-color: white;
    padding: 20px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
}

section {
    padding: 20px;
}

:scope {
    background-color: black;
}