如何通过javascript在stenciljs阴影组件中设置css变量

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})
export class MyComponent {
  @Element() hostElement: HTMLElement;

  // ...
}

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})
export class MyComponent {
  @Element() hostElement: HTMLElement;

  componentWillLoad() {
    const shadowRoot = this.hostElement.shadowRoot;
    const style = shadowRoot.querySelector('style');
    const styles = style.sheet.cssRules[0].style;
    
    // ...
  }
}

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})
export class MyComponent {
  @Element() hostElement: HTMLElement;

  componentWillLoad() {
    const shadowRoot = this.hostElement.shadowRoot;
    const style = shadowRoot.querySelector('style');
    const styles = style.sheet.cssRules[0].style;

    styles.setProperty('--my-variable', 'red');
  }
}

:host {
  background-color: var(--my-variable);
}