如何在stencil.js/tsx中定义全局变量？

import { Component, Prop, h } from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})
export class MyComponent {
  @Prop() globalVariable: string;

  render() {
    return (
      <div>
        {/* 使用全局变量 */}
        <p>{this.globalVariable}</p>
      </div>
    );
  }
}

import { Component, h } from '@stencil/core';

@Component({
  tag: 'app-root',
  styleUrl: 'app-root.css',
  shadow: true
})
export class AppRoot {
  globalVariableValue: string = 'Hello, World!';

  render() {
    return (
      <div>
        {/* 使用组件，并传递全局变量的值 */}
        <my-component globalVariable={this.globalVariableValue}></my-component>
      </div>
    );
  }
}