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

Question

是否无法让 Svelte 组件自动将所有常规 html 属性应用到组件中最顶层的元素？

Component.html

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

Application.html

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

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

Answer 1

因为一个组件中可以有多个顶级项，所以这是不可能的。但是，您可以为 Ractive 做一些类似于我在此博客 post 中概述的事情。不过，您必须确保每个组件只设置 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 References all props that are passed to a component, including ones that are not declared with export. It is not generally recommended, as it is difficult for Svelte to optimise. But it can be useful in rare cases – for example, when you don't know at compile time what props might be passed to a component.

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

Automatically passing html attributes to svelte components

svelte