Turbo Stream Targeting Error Inside Nested Turbo Frames

Direct answer

A Turbo Stream selector is resolved against the main document, not automatically scoped to the inner Turbo Frame that currently renders the element. If the stream targets an element ID that exists inside an inner frame, Turbo will find the first matching element in document order and apply the action there. That means the update can be applied to the outer frame’s DOM or appear to "lift" out of the inner frame unless the stream explicitly targets the frame itself.

Overlapping IDs across nested frames make the outcome ambiguous. The first matching element in document order is used, which is typically the outer-most occurrence. This is a confirmed risk, not a guaranteed behavior.

Confirmed facts

• Turbo Streams use standard CSS selectors against the live document. There is no built-in scoping to a containing Turbo Frame.
• Targeting a Turbo Frame by its id attribute replaces the frame’s contents. Targeting an inner element by ID does not guarantee the element stays inside that frame.
• ID collisions between frames are unsafe in HTML and cause non-deterministic selector resolution.

Likely explanation, version dependent

Model-knowledge planning suggests version differences for Rails 7.0-7.2:

• Rails 7.0 and 7.1: selector resolution is treated as relative to the outer frame’s document. Append/prepend actions tend to insert into the outer frame’s body unless the target selector explicitly matches an element inside the inner frame.
• Rails 7.2: a change is reported to resolve selectors within the nearest ancestor Turbo Frame if the target ID matches an element inside that frame. This is not confirmed from official specs and should be treated as tentative.

These claims are planning context only and require current verification on your exact release.

Scoped verification for this case

1. Render a test page with an outer frame id="outer" containing an inner frame id="inner". Place a test element with a unique ID inside the inner frame.
2. Send a Turbo Stream that targets that inner element ID with an update or append action.
3. After the stream, inspect the DOM in DevTools and check the element’s parent chain. If the new markup is a child of #inner, the target stayed inside. If it appears under #outer or the document body, the selector was resolved outside.
4. Repeat with duplicate IDs in outer and inner frames to observe which element is updated first in document order.

Recommendation: use unique IDs across nested frames and target the frame itself when you intend to update its contents, e.g. turbo-stream action="replace" target="inner", rather than targeting an inner element by ID.

One missing detail that changes the recommendation: the exact Turbo/Rails version and patch level you are running. Behavior is version-specific and the 7.2 change is not reliably documented.