`<wa-scroller>` のホスト要素に `overflow: hidden` を追加してChromeの横スクロールバグを修正

<wa-scroller> コンポーネントのホスト要素に overflow: hidden が欠落していたことで、Chromeのみでページ全体に意図しない横スクロールが発生していました。1行のCSS追加でこのエッジケースを解消しています。

背景

#2157 にて、コンポーネントドキュメントページをChromeで幅約470px以下に縮小すると横スクロールが発生するという問題が報告されました。SafariやFirefoxでは再現せず、Chromeのみで発生するレイアウトバグでした。

問題の原因究明は見かけの症状に惑わされやすいものでした。横スクロールが発生するページはドキュメントページであり、そこにはトーストのサンプルも含まれていたため、一見するとドキュメントのレイアウト問題やトーストコンポーネントのバグに見えました。しかし調査の結果、<wa-scroller> を非表示にすると問題が解消することが判明し、真の原因が特定されました。

根本原因は、<wa-scroller> のホスト要素（:host）に overflow: hidden が設定されていなかったことです。テーブルなどの幅広いコンテンツを内包した場合、Chromeの特定のレイアウト計算においてホスト要素がはみ出したコンテンツを抑制できず、ページ全体の横スクロールを引き起こしていました。

技術的な変更

scroller.styles.ts のホスト要素セレクター（:host）に overflow: hidden を1行追加することで修正されています。

変更前:

:host {
  display: block;
  position: relative;
  max-width: 100%;
  isolation: isolate;
}

変更後:

:host {
  display: block;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  isolation: isolate;
}

:host には既に max-width: 100% が指定されており、コンテナの幅を親要素内に収める意図は元から存在していました。しかし max-width だけではChromiumのレイアウトエンジンがブロック整形コンテキスト（BFC）を正しく確立しないケースがあり、内部コンテンツのオーバーフローがページ全体に漏れ出していました。overflow: hidden を追加することで新しいBFCが強制的に生成され、内部コンテンツのはみ出しがホスト要素の境界で確実に抑制されます。

設計判断

overflow: hidden をスクローラー内部のコンテナではなくホスト要素（:host）に適用するという判断が採られています。

<wa-scroller> はスクロール可能な領域を提供するコンポーネントであり、内部では別途スクロール用のオーバーフロー設定が行われています。ホスト要素への overflow: hidden 適用は、スクロール機能そのものを損なうことなく、コンポーネント外部への視覚的なはみ出しのみを防ぐ役割を担います。これはWeb Componentsにおけるカプセル化の原則に沿った対処であり、ホストがコンテンツの境界を責任を持って管理するというアプローチです。

まとめ

この修正は、症状（横スクロール）→誤った仮説（トーストバグ、ドキュメントバグ）→真因（スクローラーのBFC未確立）という診断プロセスを経て辿り着いた1行の変更です。overflow: hidden によるBFCの強制生成は、CSSレイアウトにおける古典的かつ確実な手法であり、ブラウザ間の挙動の差異を吸収するためにコンポーネントのホスト要素に適用することで、使用側への影響を最小化しています。