<script>
function action(node) {
node.classList.add('green'); // class is added dynamically
}
</script>
<p use:action>text</p>
<style>
p:global(.green) {
/* this will apply to all <p> elements belonging to this
component with a class of red, even if class="red" does
not appear in the markup. This is useful when the class
of the element is dynamically applied, for instance
when updating the element's classList property directly. */
color: green;
}
</style>