AlpineJS + Laravel Blade - x-if 条件仍然显示在 #document-fragment 下的开发工具中

Question

我在 Blade 中应用了这个条件，它似乎按预期工作，但是，在使用浏览器开发工具检查页面后，我仍然可以在不满足的条件下检查代码。它出现在#document-fragment 下。这是否意味着它仍然被添加到 DOM 中？我知道 x-show 将使用“隐藏”CSS 属性，而 x-if 应该将其从 DOM 中完全删除，但为什么在使用 x-if 时我仍然可以看到代码？这只是 AlpineJS 的一个怪癖吗？

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

我希望在满足条件之前该元素根本不会显示在开发工具中。

Answer 1

HTML 模板标签使用 DocumentFragment 结构。它们包含 HTML，但不存在于 DOM 中。就像文档描述的那样：

DocumentFragment

的常见用途是创建一个，在其中组装一个 DOM 子树，然后将片段附加或插入到 DOM 中...

您可以使用

document.querySelector('template').content

访问模板的数据，这将为您提供带有节点的文档片段。如果直接将文档片段插入到 DOM 中，内容将会被移动。您还可以复制或修改它们，而不更改片段。

AlpineJS 使用这些片段来执行这些条件。当

x-if

通过时，它会复制内容并将其放置在模板下方。您可以在 DOM 中看到这一点，其中模板仍然保存节点，但节点也在 DOM 中（重复）。

TL;DR：文档片段在 DOM 中不可见也不存在。