Passing class v2

App.xht

<script>
  import Child from './Child.xht';
  let forChild = 'glob bold hovered subtext';
  let checked = false;

  $runtime.addStyles('glob-css', `.glob {color:deeppink}`);
</script>


<div class="box">
  <i>parent</i> <br/>

  <b>Title of child:</b> <input type="text" :value={forChild} />
  <br/>
  <b>Parent -> Child -> Button:</b> <input type="checkbox" :checked />
</div>

<Child class:header={forChild} class:button={checked ? 'green' : 'pink'} />


<style>
  .box {border: 1px solid blue; padding: 4px; margin: 4px;}
  .red {color: red;}
  .bold {font-weight: bold;}
  .hovered {background-color: #e9f9ff;}
  .hovered:hover {background-color: #d4f3ff;}

  .subtext :global(small) {
    padding-left: 20px;
    color: brown;
  }

	.green {
    color: rgb(0, 150, 78);
    border: 1px solid rgba(0, 150, 78, 0.5);
  }
	.green:hover {
    border: 1px solid rgb(0, 150, 78);
    background-color: rgba(0, 150, 78, 0.04);
  }

	.pink {
    color: rgb(255, 20, 147);
    border: 1px solid rgba(255, 20, 147, 0.5);
  }
	.pink:hover {
    border: 1px solid rgb(255, 20, 147);
    background-color: rgba(255, 20, 147, 0.04);
  }
</style>


<br/>
<b>Features</b>
<ul style="margin-top: 0px;">
  <li>passing global class</li>
  <li>passing local class with hash</li>
  <li>passing imported class, forward a class further (right button)</li>
  <li>able to change not target elements, passing partly-global class (subtext)</li>
  <li>passing dynamic classes (you can change it from JS)</li>
  <li>passing pseudo-classes (:hover etc)</li>
</ul>

Button.xht

<script>
    export let title = 'Default';
</script>

<button class="btn color">{title}</button>

<style>
	.btn {
        padding: 5px 15px;
        font-weight: 500;
        border-radius: 4px;
        background-color: transparent;
        text-decoration: none;
        outline: 0;
        cursor: pointer;
        font-size: 14px;
        font-family: Ubuntu;
        line-height: 1.75;
    }
</style>

<style external>
	.color {
        color: rgba(0, 0, 0, 0.87);
        border: 1px solid rgba(0, 0, 0, 0.23);
    }
	.color:hover {
        background-color: rgba(0, 0, 0, 0.04);
    }
</style>

Child.xht

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

<div class="box">
    <i>child</i>
    <div class="header">
        Child-Header
        <br/>
        <small>sub-text</small>
    </div>
    <br/>
    <Button title="Default" />
    <Button class:color="blue" title="Blue" />
    <Button class:color="red" title="Red" />
    <Button class:color="button" title="Imported CSS" />
</div>

<style>
    .box {border: 1px solid blue; padding: 4px; margin: 4px;}

	.red {
        color: rgb(220, 0, 78);
        border: 1px solid rgba(220, 0, 78, 0.5);
    }
	.red:hover {
        border: 1px solid rgb(220, 0, 78);
        background-color: rgba(220, 0, 78, 0.04);
    }

	.blue {
        color: #1976d2;
        border: 1px solid rgba(25, 118, 210, 0.5);
    }
	.blue:hover {
        border: 1px solid #1976d2;
        background-color: rgba(25, 118, 210, 0.04);
    }
</style>

<style external>
    .header {color: blueviolet}
    .button {}
</style>