How to handle full width with StencilJS

Question

Let's assume we have a very simple component as below

@Component({
  tag: 'custom-button',
})
export class CustomButton {
  render() {
    return <button class={{ 'button--blue': true }}>Press Me</button>
  }
}

The component above will render as below on the DOM tree

<custom-button class="hydrated">
  <button class="button--blue">Press Me</button>
</custom-button>

Now everything is working fine. The problem comes only if we define width: 100% in button--blue class. It will not work because width: 100% of custom-button is essentially pointless.

I know we can solve the problem by using Host element and applying css on it

@Component({
  tag: 'custom-button',
})
export class CustomButton {
  render() {
    return (
      <Host class={{ 'full-width': true }}><button class={{ 'button--blue': true }}>Press Me</button></Host>
    )
  }
}

I am looking for alternative solution, reason being we need to purposely create another generic utility css class just because we are using stencil which I feel its not optimal.

Ultimately it will be great if my CSS is not polluted and I only have button--blue class.

Wondering if there is any alternatives available? Maybe somehow we can omit custom-button element when we render to the DOM tree?