Passing class to component

App.xht

<script>
  import Box from './Box.xht';
</script>

<Box class="purple">Purple class</Box>

<Box class="green">Green</Box>

<style>
  .purple {
    background: rebeccapurple;
    width: 8rem;
    color: white;
  }
  .purple:hover {
    background: #b7a8c6;
    width: 8rem;
    color: black;
  }

  .green {
    background: lightseagreen;
    width: 4rem;
    color: white;
  }
</style>

Box.xht

<div class="main">
	<slot>Hello</slot>
</div>

<style>
  .main {
    margin: 1rem;
    padding: 0.4rem;
  }
</style>

<style external>
  .main {
    background: red;
    width: 4rem;
  }
</style>