プロンプトとスコープ
リストに繰り返しのカードが含まれています。各カードにはトリガーと絶対配置されたツールチップがあります。トリガーは同一の anchor-name を使用し、ツールチップはそれを position-anchor で参照しているため、すべてのツールチップがドキュメント内で同じ名前を持つ最後のアンカーに揃ってしまいます。命名スコープ、コンポーネントの境界、フォールバック、およびテストを設計してください。
anchor-scope が明示的な名前付きアンカーの検索をどのように制限するかに焦点を当ててください。これは Shadow DOM の分離とは異なり、すべてのブラウザがこの Baseline 2026 機能をまだサポートしているわけではありません。
面接官がテストしていること
- スコープのない同名アンカーがソース順で解決される理由を説明できるか。
none、all、および dashed-ident 名のリストを区別できるか。- 暗黙的アンカー、シャドウツリー、オーバーフロー時のフォールバック、および非サポートブラウザに対応できるか。
- ルールを再利用可能なコンポーネント規約、テスト可能な DOM、および監視可能なフォールバックに落とし込めるか。
明確化のための質問
- ツールチップはカードの祖先要素を越える必要がありますか、それともカードのサブツリー内にとどまる必要がありますか？
- コンポーネントはネストしたり、Shadow DOM を使用したり、ツールチップを他の場所にポータル（portal）したりできますか？
- レガシーブラウザで維持すべきエクスペリエンスは何ですか？
- アンカー名はデザインシステムによって生成されますか、それともページごとに手書きされますか？
- どのようなオーバーフロー、キーボードフォーカス、およびリサイズの場合への対応が求められますか？
30秒での回答
「同一のアンカー名には可視性の境界がないため、配置された要素はソース順で最後に一致するアンカーを解決してしまいます。カードコンテナをスコープルートとして設定し、anchor-scope: --card-anchor を使用するか、内部のすべての名前を分離する場合は all を使用して、ツールチップがそのサブツリー内で解決されるようにします。機能拡張ルールは @supports で囲み、相対配置コンテナと絶対配置をフォールバックとして使用します。テストでは、ネスト、ポータル、オーバーフロー、キーボードの挙動、およびサポート状況が異なるブラウザをカバーします。名前と DOM の境界はコンポーネント規約の一部としてドキュメント化します。」
ステップバイステップの設計
1. 誤った関連付けの原因を特定する
anchor-name と position-anchor は明示的な関連付けを作成します。同じ名前のアンカーが複数あり、スコープが設定されていない場合、配置された要素はソース順で最後に一致するアンカーを解決するため、繰り返されるツールチップが重なってしまいます。サイズやスタッキングコンテキストのせいにする前に、DevTools で計算されたアンカー、DOM の順序、および包含ブロックをインスペクトしてください。
2. スコープ境界を選択する
各カードコンテナに anchor-scope を設定し、選択した名前の検索をその要素のサブツリーに制限します。all はサブツリー内のアンカー名を対象とし、--card-anchor はその名前のみを制限して、他の名前をコンポーネント間の関連付けで使用できるように残します。スコープは暗黙的アンカーを制限するものではなく、一般的なスタイルや継承の分離として機能するものでもありません。
.card {
anchor-scope: --card-anchor;
}
.card__trigger {
anchor-name: --card-anchor;
}
.card__tip {
position: absolute;
position-anchor: --card-anchor;
position-area: block-end;
}3. コンポーネントの命名規約を定義する
アンカー名は内部コンポーネントインターフェースとして扱います。ルート、アンカー、配置要素は期待されるサブツリー内に維持される必要があり、任意の祖先がスコープを上書きしてはなりません。ネストする場合は、階層ごとに名前を選択するか、内部コンポーネント内でスコープをリセットします。コンポーネントテストまたは Storybook で DOM 規約をアサートします。
4. 機能検出とフォールバックを追加する
MDN は anchor-scope を Baseline 2026 としてマークしていますが、レガシーブラウザでは実装されていない可能性があります。拡張ルールは @supports (anchor-scope: all) の配下に配置します。サポートがない場合は、相対配置コンテナと絶対配置インセット、JavaScript による幾何計算、または既存のツールチップコンポーネントを使用します。フォールバック時でもフォーカス順序、アクセシブルな名前、およびコンテンツが隠れない状態を維持してください。
5. ポータル、Shadow DOM、暗黙的アンカーを評価する
アンカースコープは、明示的な名前付きアンカーの関連付けに影響します。ツールチップがカードの外にポータルされると、スコープのサブツリーから外れる可能性があるため、一意の名前を使用するか、幾何情報を渡すか、既存の配置パスを維持してください。シャドウツリーは独自のツリースコープを持つため、境界のテストが必要です。すべての暗黙的アンカーのケースに対する修正として anchor-scope を使用しないでください。
6. テストと監視
複数カード、ネストされたカード、動的挿入、並べ替え、リサイズ、スクロール、ズーム、キーボードフォーカス、およびポータルをテストします。各ツールチップの幾何配置、オーバーフロー、アクセシビリティツリー、およびフォールバックの発生率をアサートします。ユーザー入力をログに記録することなく、機能検出と配置エラーをログに記録します。
質の高い模範解答
「スコープがない場合、同じ名前のアンカーはソース順で最後の要素に解決されるため、繰り返されるツールチップが重なってしまいます。カードルートに anchor-scope: --card-anchor、トリガーに anchor-name、ツールチップに position-anchor を設定して、明示的な検索をカードのサブツリーに制限します。内部のすべての名前を分離する必要がある場合は all を使用します。これは暗黙的アンカーや通常の CSS 継承には影響しません。レガシーブラウザ向けには @supports を使用して相対配置コンテナと既存のツールチップパスへフォールバックします。ネスト、ポータル、Shadow DOM、オーバーフロー、リサイズ、キーボードフォーカス、および並べ替え操作をテストし、名前と DOM の境界をコンポーネント規約にドキュメント化します。」
よくある間違い
- すべての要素に異なるアンカー名を与える → コンポーネントを綺麗に再利用できなくなる → 繰り返される名前にスコープを設定する。
allを Shadow DOM のように扱う → 継承、ポータル、ツリースコープは依然として異なる → 検索とスタイルの境界を個別にテストする。- ソース順を無視する → 最後のカードのみのテストではバグが見落とされる → 複数のカードと並べ替えをテストする。
- フォールバックを提供しない → レガシーブラウザでツールチップの配置が崩れる →
@supportsと既存の絶対配置または JavaScript パスを使用する。 - 暗黙的アンカーにスコープを適用する → ルールが意図した効果を持たない → 関連付けが明示的か暗黙的かを確認する。
フォローアップの質問と回答
anchor-scope: all と名前付きの値はどのように使い分けますか？
コンポーネント内のすべてのアンカー名をそのカード内でのみ解決させる必要がある場合は、all を使用します。1 つの名前に分離が必要であるものの、他の名前は境界を越えて利用可能にしておく必要がある場合は、--card-anchor を使用します。どちらもコンポーネントの DOM 規約に沿ってテストしてください。
ツールチップはカードのサブツリー内にとどまる必要がありますか？
いいえ。ポータルやグローバルオーバーレイはスコープのサブツリーから外れ、カードアンカーへのアクセスを失う可能性があります。オーバーレイを誤った DOM レイヤーに無理に押し込むのではなく、一意のアンカー名を付与するか、幾何情報を渡すか、JavaScript による位置決めを維持してください。
このプロパティはすべてのプロダクトで使用できる状態ですか？
MDN はこれを Baseline 2026 とラベル付けしていますが、W3C CSS Anchor Positioning Level 1 は引き続き Working Draft（作業草案）の段階です。対象ブラウザのマトリクスを確認し、プログレッシブエンハンスメントのために @supports と機能テストを使用してください。