Wawancara Frontend: Bagaimana cara mengisolasi anchor pada komponen berulang dengan CSS anchor-scope?

Petunjuk dan cakupan

Sebuah daftar berisi kartu-kartu yang berulang. Setiap kartu memiliki sebuah pemicu (trigger) dan tooltip yang diposisikan secara absolut. Pemicu menggunakan anchor-name yang sama, dan tooltip mereferensikannya dengan position-anchor; setiap tooltip sejajar dengan anchor bernama sama yang terakhir di dalam dokumen. Rancang cakupan penamaan, batas-batas komponen, fallback, dan pengujian.

Fokuskan pada bagaimana anchor-scope membatasi pencarian anchor bernama eksplisit. Ini bukan isolasi Shadow DOM, dan belum semua peramban mendukung fitur Baseline 2026 ini.

Apa yang sedang diuji oleh pewawancara

• Menjelaskan mengapa anchor bernama sama yang tidak diberi cakupan (unscoped) dapat di-resolve berdasarkan urutan sumber (source order).
• Membedakan none, all, dan daftar nama dashed-ident.
• Menangani implicit anchor, shadow tree, fallback overflow, dan peramban yang tidak didukung.
• Mengubah aturan menjadi kontrak komponen yang dapat digunakan kembali, DOM yang dapat diuji, dan fallback yang dapat diobservasi.

Pertanyaan klarifikasi

1. Haruskah tooltip melintasi ancestor kartu, atau harus tetap berada di dalam subtree kartu?
2. Bisakah komponen bersarang (nest), menggunakan Shadow DOM, atau memindahkan (portal) tooltip ke tempat lain?
3. Pengalaman apa yang harus dipertahankan untuk peramban versi lama?
4. Apakah nama anchor dibuat oleh sistem desain atau ditulis manual per halaman?
5. Kasus overflow, fokus keyboard, dan perubahan ukuran (resize) mana saja yang diwajibkan?

Jawaban 30 detik

“Nama anchor yang sama tidak memiliki batasan visibilitas, sehingga elemen yang diposisikan dapat me-resolve anchor cocok yang terakhir dalam urutan sumber. Saya menetapkan kontainer kartu sebagai root cakupan dan menggunakan anchor-scope: --card-anchor, atau all ketika setiap nama internal harus diisolasi, sehingga tooltip di-resolve di dalam subtree tersebut. Saya membungkus aturan penyempurnaan di dalam @supports dan beralih ke kontainer relatif ditambah penentuan posisi absolut sebagai fallback. Pengujian mencakup penyarangan, portal, overflow, perilaku keyboard, dan peramban dengan dukungan yang berbeda. Saya mendokumentasikan nama dan batasan DOM sebagai bagian dari kontrak komponen.”

Perancangan langkah demi langkah

1. Mendiagnosis asosiasi yang salah

anchor-name dan position-anchor membuat asosiasi eksplisit. Dengan beberapa anchor yang bernama sama dan tanpa cakupan (scope), elemen yang diposisikan dapat me-resolve anchor cocok terakhir dalam urutan sumber, sehingga tooltip yang berulang menumpuk bersamaan. Periksa computed anchor, urutan DOM, dan containing block di DevTools sebelum menyalahkan ukuran atau konteks penumpukan (stacking context).

2. Memilih batas cakupan

Tetapkan anchor-scope pada setiap kontainer kartu untuk membatasi pencarian nama-nama yang dipilih ke subtree elemen tersebut. all mencakup nama-nama anchor di dalam subtree; --card-anchor hanya membatasi nama tersebut, membiarkan nama lain tetap tersedia untuk asosiasi lintas komponen. Cakupan tidak membatasi implicit anchor atau bertindak sebagai isolasi gaya atau pewarisan (inheritance) secara umum.

.card {
  anchor-scope: --card-anchor;
}

.card__trigger {
  anchor-name: --card-anchor;
}

.card__tip {
  position: absolute;
  position-anchor: --card-anchor;
  position-area: block-end;
}

3. Menentukan kontrak penamaan komponen

Perlakukan nama anchor sebagai antarmuka internal komponen. Root, anchor, dan elemen yang diposisikan harus tetap berada di dalam subtree yang diharapkan, dan ancestor sembarang tidak boleh menimpa cakupan tersebut. Untuk penyarangan, pilih nama per level atau reset cakupan di dalam komponen internal. Pastikan kontrak DOM ditegaskan (assert) dalam pengujian komponen atau Storybook.

4. Menambahkan deteksi kapabilitas dan fallback

MDN menandai anchor-scope sebagai Baseline 2026, tetapi peramban yang lebih lama mungkin belum mengimplementasikannya. Tempatkan aturan penyempurnaan di balik @supports (anchor-scope: all). Tanpa dukungan, gunakan kontainer relatif dengan inset absolut, geometri JavaScript, atau komponen tooltip yang sudah ada. Pertahankan urutan fokus, nama yang dapat diakses (accessible names), dan konten yang tidak tertutupi pada fallback.

5. Mengevaluasi portal, Shadow DOM, dan implicit anchor

Anchor scope memengaruhi asosiasi anchor bernama eksplisit. Jika tooltip di-portal ke luar kartu, tooltip tersebut dapat meninggalkan subtree cakupan; gunakan nama unik, teruskan geometri, atau pertahankan jalur penentuan posisi yang ada sebagai gantinya. Shadow tree memiliki cakupan pohonnya sendiri dan memerlukan pengujian batas. Jangan gunakan anchor-scope sebagai perbaikan untuk setiap kasus implicit-anchor.

6. Menguji dan mengamati

Uji beberapa kartu, kartu bersarang, penyisipan dinamis, pengurutan ulang, resize, scroll, zoom, fokus keyboard, dan portal. Periksa geometri setiap tooltip, overflow, pohon aksesibilitas, dan tingkat fallback. Catat deteksi kapabilitas dan kesalahan penentuan posisi tanpa mencatat input pengguna.

Model jawaban berkualitas tinggi

“Tanpa cakupan, anchor bernama sama dapat di-resolve ke elemen terakhir dalam urutan sumber, sehingga tooltip yang berulang saling tumpang tindih. Saya menetapkan anchor-scope: --card-anchor pada root kartu, anchor-name pada pemicu, dan position-anchor pada tooltip untuk membatasi pencarian eksplisit ke subtree kartu. Jika semua nama internal harus diisolasi, saya menggunakan all; ini tidak memengaruhi implicit anchor atau pewarisan CSS biasa. Peramban yang lebih lama mendapatkan fallback @supports ke penentuan posisi kontainer relatif dan jalur tooltip yang sudah ada. Saya menguji penyarangan, portal, Shadow DOM, overflow, resize, fokus keyboard, dan operasi pengurutan ulang, serta mendokumentasikan batasan nama dan DOM dalam kontrak komponen.”

Kesalahan umum

• Memberi nama anchor yang berbeda pada setiap elemen → komponen tidak dapat digunakan kembali dengan bersih → berikan cakupan pada nama yang berulang.
• Memperlakukan all sebagai Shadow DOM → pewarisan, portal, dan cakupan pohon tetap berbeda → uji batas pencarian dan gaya secara terpisah.
• Mengabaikan urutan sumber → pengujian pada satu kartu terakhir menyembunyikan bug → uji beberapa kartu dan pengurutan ulang.
• Tidak menyediakan fallback → peramban versi lama kehilangan penempatan tooltip → gunakan @supports dan jalur absolut atau JavaScript yang sudah ada.
• Menerapkan cakupan pada implicit anchor → aturan tidak memberikan efek yang dimaksudkan → konfirmasikan apakah asosiasinya eksplisit atau implisit.

Pertanyaan lanjutan dan tanggapan

Kapan Anda memilih anchor-scope: all versus nilai bernama?

Gunakan all ketika setiap nama anchor di dalam komponen harus di-resolve hanya di dalam kartu tersebut. Gunakan --card-anchor ketika satu nama memerlukan isolasi tetapi nama lain harus tetap tersedia lintas batas. Uji keduanya dengan kontrak DOM komponen.

Haruskah tooltip tetap berada di dalam subtree kartu?

Tidak. Portal atau overlay global dapat keluar dari subtree cakupan dan kehilangan akses ke anchor kartu. Berikan overlay nama anchor yang unik, teruskan geometri, atau pertahankan penentuan posisi JavaScript daripada memaksa overlay masuk ke lapisan DOM yang salah.

Apakah properti ini siap untuk setiap produk?

MDN melabelinya sebagai Baseline 2026, sementara W3C CSS Anchor Positioning Level 1 masih berupa Working Draft. Periksa matriks peramban target dan gunakan @supports beserta uji kapabilitas untuk peningkatan progresif (progressive enhancement).