Svelte组件首次挂载时CSS过渡异常问题排查

简化后的ProgressDots.svelte代码 #

hello
<div class="progress-dots">
  <div class="progress-dots__dot"></div>
</div>

<style>
    .progress-dots {
        display: flex;
        justify-content: center;
    }

    .progress-dots__dot {
        width: 10px;
        aspect-ratio: 1 / 1;
        background: #ccc;
        border-radius: 100%;
        transition: background 0.3s ease-in-out
    }
</style>

遇到的问题 #

组件首次挂载时，.progress-dots__dot元素会出现从透明到#ccc的过渡效果。已在组件根节点添加“hello”文本验证，排除组件整体透明度等全局因素，仅圆点元素存在该过渡问题。

推测与测试 #

• 最初推测：构建后的JS文件包含圆点的CSS，但CSS在元素添加前未加载。性能录制显示CSS加载与元素挂载的时序存在错位。
• 后续测试：将根节点的“hello”修改为以下内容：

<span style="transition: color 2s ease-in-out; color: crimson;">hello</span>
<span class="test">world</span>
<style>
    .test {
        transition: color 2s ease-in-out; color: teal;
    }
</style>

加载后发现：内联样式的“hello”无过渡效果，而使用类样式的“world”出现了从默认文字色到teal的过渡效果。

定位到的原因与疑问 #

问题根源在于配置了compilerOptions: { customElement: true }，修改该配置为关闭后恢复正常。但疑问是：无论是否开启自定义元素配置，组件都应该正常工作，为何该配置会导致初始过渡异常？

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