AlpineJS + Laravel Blade – x-if conditions still showing in the devtools under #document-fragment

by

I’m applying this condition in blade and it seems to work as expected, however, after inspecting the page with the browser devtools, I can still inspect the code under the condition that’s not met. It appears under #document-fragment. Does this mean it’s still being added to the DOM? I understand that x-show would use the “hidden” CSS property and x-if should be removing it from the DOM altogether, but why can I still see the code when using x-if? Is this just a quirk of AlpineJS?

<template x-if="selectedTab === '1'">
   <x-dashboard.content.groups.myGroups />
</template>
<template x-if="selectedTab === '2'">
   <x-dashboard.content.groups.myTeam />
</template>

I would have expected the element to not show at all in the dev tools until the condition is met.

Leave a Comment