如何解决Svelte中使用Stencil组件时slot属性冲突报错问题

你遇到的报错如下：

Element with a slot='...' attribute must be a child of a component or
a descendant of a custom element

可用解决方案 #

方案1：配置Svelte编译器识别自定义元素（推荐） #

直接在Svelte配置文件中添加你的Stencil组件的标签规则，让Svelte将这些标签识别为原生自定义元素，跳过slot校验，原有组件写法不需要做任何改动即可正常运行。
修改svelte.config.js：

export default {
  compilerOptions: {
    // 支持通配符匹配所有你团队开发的Stencil组件前缀
    customElements: ['my-ui-*']
  }
}

方案2：使用{@html}渲染绕开编译校验 #

如果不想修改全局配置，可以单独把需要传slot的Stencil组件当成HTML字符串插入，Svelte不会对这部分内容做编译校验：

<script>
  const uiImage = `
  <my-ui-image
    slot="image"
    src="/images/image.png"
    shadow-on-image="false"
    alt="image alt"
    title="Image title"
  />
  `
</script>

{@html uiImage}

方案3：使用svelte:element动态渲染 #

用Svelte内置的动态元素标签渲染Stencil组件，也可以跳过slot校验：

<svelte:element 
  this="my-ui-image"
  slot="image"
  src="/images/image.png"
  shadow-on-image="false"
  alt="image alt"
  title="Image title"
/>

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