Dragging Slider in Experimental Layout works, but not when again wrapped into @htl

[schlichtanders]

Hi there, consider the following example

using PlutoUI, HypertextLiteral

# --------------------

ui_n = @bind x Slider(1:10)

# --------------------

y = 2x

# --------------------

experimental_layout = PlutoUI.ExperimentalLayout.Div([PlutoUI.ExperimentalLayout.Div(@htl "x = $ui_n"), PlutoUI.ExperimentalLayout.Div(@htl "y = 2x = $y")], style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));")

# --------------------

@htl "$experimental_layout"

While dragging the slider in the experimental_layout cell works, it does freeze constantly when used in the @htl "$experimental_layout" cell.

Does someone know the reason and whether there is some way to circumvent this? It would be great if PlutoUI.ExperimentalLayout.Div could be used as part of an outer @htl context.

[fonsp]

Interesting! Originally, PlutoUI.ExperimentalLayout.Div would only work when it was used all the way to the top, i.e. the Div must be the object returned by the cell, or its chain of parents is.

When wrapped inside @htl, I believe that we use embed_display (JuliaPluto/AbstractPlutoDingetjes.jl#9) to make it work. So there must be an issue in the embed_display mechanism. It's also possible that we just render HTML in this case. You can check the browser devtools which is the case.

[fonsp]

But note that you only get the full benefits of experimentallayout (like partial re-rendering) if you return it directly from a cell.