It would be useful if Fluid had some functionality similar to the Vue Teleport component.
The example on that page exactly describes the issue a Fluid template currently has. When rendering an button and a related modal, they are required to exist alongside each other and even within the same parent container depending on the rendering. Styles applied to the parent container affect not only the button but also the modal and its content.
This could be avoided if the modal could be rendered at a completely different location on the page.
I am aware that Fluid is not DOM-aware so a single viewhelper with to="<selector>" won't be possible. But maybe a pair of viewhelpers, one which emits the content to teleport and another which receives and renders it.
I did a quick attempt using the variable provider and the viewhelper variable provider of the rendering context but the latter is always a separate instance, which prevents sharing data globally for a complete rendering.
It would be useful if Fluid had some functionality similar to the Vue Teleport component.
The example on that page exactly describes the issue a Fluid template currently has. When rendering an button and a related modal, they are required to exist alongside each other and even within the same parent container depending on the rendering. Styles applied to the parent container affect not only the button but also the modal and its content.
This could be avoided if the modal could be rendered at a completely different location on the page.
I am aware that Fluid is not DOM-aware so a single viewhelper with
to="<selector>"won't be possible. But maybe a pair of viewhelpers, one which emits the content to teleport and another which receives and renders it.I did a quick attempt using the variable provider and the viewhelper variable provider of the rendering context but the latter is always a separate instance, which prevents sharing data globally for a complete rendering.