Currently, we have two methods to highlight Turbo Frames:
Direct Outline:
Add an outline directly to the frame.
Set the display property to block.
This approach is more reliable and is the default behavior of this extension.
However, setting the display property to block can break the layout of the page.
Additional div Element:
Add a div element with the same dimensions as the frame.
Set the position to absolute and add the outline to the div.
This approach is less intrusive to the page layout but can be less reliable. If the frame changes size and we don’t detect it, the outline will be incorrect. It also impacts performance as it requires adding multiple additional elements to the page.
Highlighting Stimulus controllers presents a similar issue. When we add an outline to the controller element, we assume the element and a potential outline is visible. However, if the element has for example display: contents, the outline won’t be visible.
I currently don't have a good solution for this, but I hope we can come up with a more reliable method in the future for highlighting elements.
Currently, we have two methods to highlight Turbo Frames:
displayproperty toblock.This approach is more reliable and is the default behavior of this extension.
However, setting the
displayproperty toblockcan break the layout of the page.divElement:divelement with the same dimensions as the frame.positiontoabsoluteand add the outline to thediv.This approach is less intrusive to the page layout but can be less reliable. If the frame changes size and we don’t detect it, the outline will be incorrect. It also impacts performance as it requires adding multiple additional elements to the page.
Highlighting Stimulus controllers presents a similar issue. When we add an outline to the controller element, we assume the element and a potential outline is visible. However, if the element has for example
display: contents, the outline won’t be visible.I currently don't have a good solution for this, but I hope we can come up with a more reliable method in the future for highlighting elements.