我可以以某种方式修改 uikit 的 JS 以允许我将它与 SvelteKit 一起使用吗？

Question

我已经解决这个问题一年了，找不到任何解决方案，所以这里什么都没有：

自从最近对 Svelte 或 UIKit 进行了更新（遗憾的是我不知道是哪一个）以来，它们似乎相互冲突。 Svelte 似乎想要比以前更积极地控制 DOM，这会干扰 UIKit 的修改。例如手风琴和网格无法正确显示。

我的网站页脚应该是这样的

，但实际上看起来像

所有这些示例以及更多示例都可以在d20cay.com 上查看。重新加载页面时会出现问题。

我试过了

• 更明确地设置适当的类，这会修复元素的对齐方式，但折叠式折叠的内容在关闭时是可见的（加载时）。
• 联系 UIKit 开发人员解决此问题。我没有得到回复。
• 联系 Svelte 开发人员解决此问题。我收到回复说我应该与 UIKit 开发人员核实。
• 我尝试在 UIKit JavaScript 和 CSS 中找出问题，但我做得不够好和/或文件太大。

可以在github.com/d20cay/sveltekit-test 找到最小工作（或在这种情况下不工作）示例。

此时我将切换到不同的 CSS 或 UI 框架。如果任何人都找到解决此问题的方法，那么在几年后，我将非常感谢您的评论。谢谢。

Answer 1

解决方法

用内容创建src/routes/__layout.svelte：

{' '} <!-- this line magically solves the problem  -->
<slot/>

P.S.：我不明白为什么它有效，但它有效

说明

问题在于 UIkit MutationObserver 和 SvelteKit hydration 之间的冲突。

发生了什么：

1. SvelteKit 在服务器端 (SSR) 呈现 HTML。
2. uikit.js 被加载并应用于呈现的 HTML（UIkit 处理 uk-* 属性并注册 MutationObserver）。
3. SvelteKit 在客户端对 index.svelte 组件进行水合，此操作会触发 UIkit 的 MutationObserver 事件。
4. UIkit 再次处理uk-* 属性，而之前UIKit 处理的属性会破坏它。