Phoenix.HTML.Tag.tag nesting all tags underneath as its children

Questions & Help Questions
, ,
1

I’m using sveltex for frontend.
My layout looks like this:

<html>
  <head>
  ...
  </head>

  <body>
    <main role="main">
      <%= Sveltex.render "paper/header", %{...}%>
      <%= @inner_content %>
    </main>
  </body>
</html>

One would expect Phoenix.HTML.Tag.tag created by Sveltex.render to be siblings with @inner_content, but actually it takes liberty to declare @inner_content as its child; moreover, content of Svelte component itself gets included as a last child (.hero-head):

image
image430×141 16.5 KB

I was able to replicate this behaviour inserting Phoenix.HTML.Tag.tag directly. One workaround I found is to wrap tag with another div. Outer auxiliary div won’t show up in tree, and everything will work as expected. Is is well-defined behaviour or I’m missing some piece of tag functionality?

2

Nevermind, looking at the tag source, it creates opening tag only, and henceforth DOM tree was in fact invalid. So closing tag needs to be put as well.

3

What is likely happening is that something is forgetting to close an HTML tag, so the browser is guessing it and closing it in an unexpected way.

4

It is indeed happening :slight_smile: