编译为自定义元素时，如何使用 Svelte 的元素属性？

Question

我正在尝试使用 Svelte 创建自定义复选框并将其编译为自定义元素（使用 customElement: true），但我不知道使用属性的正确方法是什么。

查看生成的代码，看起来 attributeChangedCallback 和 observedAttributes 是根据您在 .svelte 文件中导出的变量自动生成的，所以这似乎按预期工作，尽管我没有找到任何文档这个。

现在我有这种 hacky 方法，可以手动创建已检查的属性并管理已检查属性的不同值（以匹配本机行为），如下所示：

<script>
    import { onMount } from 'svelte';
    export let checked;

    onMount(() => {
        if (checked != null) {
            checked = true;
        } else {
            checked = false;
        }
    });
</script>

然后我简单地将检查属性设置为输入元素并添加一个更改事件以在 checking/unchecking 输入时保持属性更新：

<input
  on:change={(event) => {
      checked = event.currentTarget.checked;
  }}
  type="checkbox"
  {checked}
/>

这就是您使用 Svelte 和自定义元素使用属性和管理属性状态的方式吗？

Answer 1

虽然这很有效，但 Svelte 允许您大大简化它：

<svelte:options tag="my-checkbox"/>

<script>
    // `checked` will be `false` by default, but a user may pass in a
    // different value through the attribute/property with the same name.
    export let checked = false;

    // this next line isn't strictly necessary. if you want to guarantee
    // `checked` is always a boolean even if the user passes a different
    // value, you can use a reactive statement to consistently convert
    // `checked` into a boolean. this will re-run automatically.
    $: checked = (checked !== false);
</script>

<!--
    `bind:checked` is a shorthand for `bind:checked={checked}`, which in
    turn means the `checked` property of the input will have a two-way
    binding to the `checked` property of this component. updating one will
    automatically update the other.
-->
<input type="checkbox" bind:checked>

Svelte 的反应系统将确保组件的 checked property/variable 与自定义元素的 checked 属性保持同步，并且如您所述，对自定义元素的更改元素的属性也会触发组件的更新。

请注意，您不会看到组件的更改反映在元素的属性中，因此如有必要，您必须手动执行此操作。不过，通常属性访问权限就足够了。

编译为自定义元素时，如何使用 Svelte 的元素属性？

How do you use element attributes with Svelte when compiling to a custom element?

web-component

svelte

custom-element