如何优雅修改Angular中CloudFlare Turnstile的宽高？

我需要调整CloudFlare Turnstile的宽度以适配其父布局，但找不到修改其IFrame的简洁方案。有没有更优雅的实现方式？

我当前采用的修改宽高的方式比较繁琐：

import { Renderer2 } from '@angular/core';

TS文件代码：

ngOnInit(): void {
    this.turnsTileChange();
 }

turnsTileChange(): void {
    this.renderer.listen('window', 'message', (event) => {
      if (event.data.event !== 'init') {
        return;
      }

      const turnstileIframe = this.renderer.selectRootElement(`#cf-chl-widget-${event.data.widgetId}`);
      if (!turnstileIframe) {
        return;
      }

      this.renderer.setStyle(turnstileIframe, 'width', '90%');
      this.renderer.setStyle(turnstileIframe, 'height', '65px');
      this.renderer.setStyle(turnstileIframe, 'display', 'block'); // 改为block确保可见
      event.stopImmediatePropagation();
    });
  }

DOM结构：

<ngx-turnstile [siteKey]="turnsTileSiteKey" [formControl]="turnsTileCtrl" theme="light"></ngx-turnstile>

更优雅的实现方式 #

1. 用CSS直接控制容器与内部IFrame #

无需监听window消息，通过CSS选择器定位组件容器和内部IFrame，利用Angular的::ng-deep穿透组件样式或全局样式设置：

/* 组件内样式（需加::ng-deep）或全局样式文件中 */
::ng-deep .ngx-turnstile-container {
  width: 90% !important;
}

::ng-deep .ngx-turnstile-container iframe {
  width: 100% !important;
  height: 65px !important;
  display: block !important;
}

2. 借助组件自带的ready回调事件 #

ngx-turnstile提供了(ready)回调，组件初始化完成后直接获取IFrame修改样式，比监听全局消息更精准：

// TS文件中
import { ViewChild } from '@angular/core';
import { NgxTurnstileComponent } from '@ngx-turnstile/core';

@Component({
  // 组件配置
})
export class YourComponent {
  @ViewChild(NgxTurnstileComponent) turnstile!: NgxTurnstileComponent;

  onTurnstileReady() {
    const iframe = this.turnstile.element.querySelector('iframe');
    if (iframe) {
      iframe.style.width = '90%';
      iframe.style.height = '65px';
      iframe.style.display = 'block';
    }
  }
}

<!-- 模板中添加ready回调 -->
<ngx-turnstile 
  [siteKey]="turnsTileSiteKey" 
  [formControl]="turnsTileCtrl" 
  theme="light"
  (ready)="onTurnstileReady()"
></ngx-turnstile>

3. 尝试官方widgetSize配置（限预设尺寸） #

Turnstile官方支持widgetSize参数调整组件尺寸，不过仅支持compact这类预设值，若需求是自定义百分比宽度则不适用，但可优先尝试：

<ngx-turnstile 
  [siteKey]="turnsTileSiteKey" 
  [formControl]="turnsTileCtrl" 
  theme="light"
  [widgetSize]="'compact'"
></ngx-turnstile>

内容的提问来源于stack exchange，提问作者Reza Taba