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

Question

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.

Answer 1

HTML template tags use the DocumentFragment structure. These contain the HTML, but are not present in the DOM. Like the docs describe:

A common use for DocumentFragment is to create one, assemble a DOM subtree within it, then append or insert the fragment into the DOM...

You can access the data of a template using document.querySelector('template').content, which will give you the document fragment with the nodes. If you directly insert a document fragment into the DOM, the content will be moved. You can also copy or modify them, without altering the fragment.

AlpineJS uses these fragments to execute these conditionals. When the x-if passes, it copies the content and places it underneath the template. You can see this in the DOM, where the template still holds the nodes, but the nodes are also (duplicated) in the DOM.

TL;DR: Document fragments are not visible nor present in the DOM.