Documentation gap: Top-level d3-transition breaks when using shadow DOM

[bsidhom]

The current implementation of selection.transition(t), when given an existing transition object t, attempts to search up the DOM tree for the nearest ancestor for the target transition object. This works correctly in light DOM.

However, if you're using shadow DOM for component isolation (either directly or through a framework that inserts shadow isolation points) and, e.g., creating a shared transition object on the document root (via a bare d3.transition()), the search will fail once you reach the shadow root element, which returns null for .parentNode.

One way to solve this would be to adapt the search to detect if it has reached a shadow root and to jump to its host element before continuing the ancestor search from there. It's not clear if that would be the desired behavior though, since it silently breaks encapsulation of shadow components. On the other hand, this does mean you cannot share transitions across scoped shadow roots, even if that's what you want.

Instead, I propose adding some warning text that explains that this breaks with shadow DOM and gives a workaround (e.g., using d3.select(element.shadowRoot).transition() instead of d3.transition() to create a shared transition in this case). I couldn't find a trouble-shooting or FAQ page on the doc site, so maybe this should just live in the d3.transition() documentation.

It might also make sense to add some options to selection.transition(t) to indicate that you do in fact want to search across shadow DOM boundaries, but that's a different design question.