search

lemonadee71 / poor-man-jsx

Create DOM elements painlessly with tagged template literals.
MIT License
1 stars 0 forks source link

Anything that follows a self-closing custom component is removed #39

Open lemonadee71 opened 1 year ago

lemonadee71 commented 1 year ago

I have this code

 <div class="group w-52 p-3 space-y-2">
    <my-icon name="kanban" class="stroke-sky-500 group-hover:stroke-sky-600 mx-auto" size="130" decorative="true" /> 
    <h3 class="font-medium text-xl text-center">Kanban boards</h3>
    <p class="text-neutral-700 text-center">
      Inspired by desktop app for
      <a
        class="underline hover:text-black"
        href="https://chrome.google.com/webstore/detail/desktop-app-for-google-ta/lpofefdiokgmcdnnaigddelnfamkkghi?hl=en"
      >
        Google Tasks
      </a>
      , easily manage tasks on a Kanban board
    </p>
  </div>

And anything that follows my-icon is not rendered. You can test this by moving the custom component in the order.

lemonadee71 commented 1 year ago

So turns out the problem is that custom elements need to have a closing tag otherwise it will create one and it will wrap anything that follows. A fix would be to just turn <my-icon /> to <my-icon></my-icon>.