py-set binding overwrites first element when DOM IDs collide in PyScript

Answer

When py-set finds more than one element with the same ID, PyScript binds the Python variable to the first element it encounters during a depth‑first walk of the document. All later duplicates are ignored for both reading and writing.

Why this happens

PyScript builds an internal DOM node registry that mirrors the native getElementById contract: each ID maps to a single node, the first match. This is intentional because it keeps the binding API consistent with standard JavaScript ID lookup and with Pyodide’s expectation of a unique element per ID.

How to bind to the intended element without changing IDs

1. Wrap the target elements in a container that has a unique ID (or any unique selector).
2. Move the py-set attribute to that wrapper.
3. Use py-get (or a custom py-proxy selector) on the wrapper to read/write each child individually, e.g. <div py-set="myList"><div>{{ myList[0] }}</div><div>{{ myList[1] }}</div></div>.
4. Alternatively, attach a unique data‑ attribute to each element and bind via a py-proxy that uses a CSS selector like [data‑idx="0"].
5. If you need full encapsulation, define a custom element or use py-component with a shadow DOM; IDs inside the shadow tree are scoped and cannot collide with the outer document.

These patterns let you keep the original markup IDs while ensuring each binding targets the exact element you intend.