1つの要素に複数の anchor-name を付ける

なぜ必要か

例えばアバターに2つのアンカー装飾があるとします：右下のプレゼンスドットと右上の通知カウントです。両方とも同じアバターにアンカーしますが、概念的には別のターゲットです。アバターに2つのアンカー名を与えることで、関係性を明示的に保てます。

.avatar {
  /* カンマ区切りで複数の名前 */
  anchor-name: --avatar-corner-tr, --avatar-corner-br;
}

.unread-count {
  position: absolute;
  position-anchor: --avatar-corner-tr;
  position-area: top-end;
  transform: translate(40%, -40%);
}

.presence-dot {
  position: absolute;
  position-anchor: --avatar-corner-br;
  position-area: bottom-end;
  transform: translate(40%, 40%);
}

1つのアンカー名で position-area を変えるだけではダメ？

実はそれでも動きます。2名前バージョンはこの単純なケースでは等価です。利点が現れるのは：

1. 装飾のライフタイムが異なる場合：.unread-count が通知APIに基づいて条件レンダリングされるのに対し、.presence-dot は常に存在する、というケース。名前を分けるとリファクタリングが安全になります。
2. 装飾がコンポーネントツリーの異なる部分から来る場合：通知システムがグローバルポータルから .unread-count をマウントし、.presence-dot はインラインでレンダリングされる。名前を分けることで偶発的な結合を避けられます。
3. ターゲットごとに異なる position-area が必要な場合：1名前 + ターゲットごとの position-area でも動きますが、2名前なら position-anchor を独立して指し直すことで、各ターゲットが追従する アンカー要素 も変えられます。

命名規則

関係性を表すセマンティックな名前を使ってください：

• 繰り返しトリガーボタン用に --menu-trigger-1、--menu-trigger-2 ...
• カード内のドラッグ可能ハンドルに --card-handle
• テーブルの行ごとアクションメニューに --row-action-anchor

本番コードでは --anchor-1、--anchor-2 を避けてください — 20以上のアンカー名を持つようになると、セマンティック名は必須になります。

スコープと一意性

アンカー名はデフォルトでドキュメントスコープです。anchor-scope プロパティ（Chrome 131+）でサブツリースコープに制限でき、コンポーネントライブラリには必須です：ツールチップコンポーネントの各インスタンスが、兄弟インスタンスと衝突せずに同じ内部名を使えるようになります。