svelte - 自动将 html 属性传递给 svelte 组件

Question

是否不可能允许苗条组件自动将所有常规 html 属性应用于组件中最顶层的元素？

组件.html

<div>
  <slot></slot>
</div>

应用程序.html

<div>
  <Component class="extend">
    Some text
  </Component>
</div>

并将 .extend 添加到组件内的 div 中吗？

Answer 1

因为您可以在一个组件中拥有多个顶级项目，所以这是不可能的。但是，您可以做一些类似于我在这篇博客文章中为 Ractive 概述的事情。不过，您必须确保每个组件仅设置 1 个顶级项目。

https://www.donielsmith.com/blog/2016/06/05/passing-attributes-down-with-ractivejs/

Answer 2

<Widget {...$$props}/>
<input {...$$restProps}>

这是可能的，但不推荐。直接来自文档：https ://svelte.dev/docs

$$props引用传递给组件的所有道具，包括未使用 export 声明的道具。通常不建议这样做，因为 Svelte 很难优化。但它在极少数情况下很有用——例如，当您在编译时不知道哪些 props 可能被传递给组件时。