SvelteKit新路由系统中意外div的来源排查

这个额外的<div>是Svelte的内置特性导致的：当一个Svelte组件没有单个根元素时，框架会自动生成一个<div>来包裹组件内的所有内容。

你的+layout.svelte仅包含<slot/>，没有为它设置外层根元素，Svelte便自动补上了这个用于包裹的<div>，最终体现在生成的DOM结构中。

解决方法很直接：

• 给+layout.svelte的<slot/>添加一个自定义根容器，比如：

  <div class="layout-container">
    <slot/>
  </div>
  

• 若不需要额外容器，可使用<svelte:fragment>替代自动生成的<div>，代码如下：

  <svelte:fragment>
    <slot/>
  </svelte:fragment>
  

这样就能消除那个意料之外的<div>了。

内容的提问来源于stack exchange，提问作者Math_Novice