使用 vaadin 的 Web 组件和使用 svelte 的 rollup：主按钮忽略主题属性

Question

也许有人以前尝试过这个并且能够给我一个提示。我使用了正常的 svelte 设置（在主页中提到）来构建应用程序；

npx degit sveltejs/template my-svelte-project

我想在 Svelte 中使用 vaadin Web 组件。我已经安装了；

npm install @vaadin/vaadin

main.ts的代码：

<script lang="ts">
    import '@vaadin/button/theme/material'

</script>

<main>
    <vaadin-button theme="primary">Primary</vaadin-button>
    <vaadin-button theme="secondary">Sec</vaadin-button>
</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }

    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>

事实是它几乎可以工作:)按钮是有样式的，我可以点击它们但是......主题被忽略；

主要应该有一个背景颜色，如文档中所述； https://vaadin.com/docs/latest/ds/components/button/#styles

任何想法？？？

Answer 1

发生这种情况是因为 Svelte 在自定义元素上设置数据的方式。如果元素上存在与您设置的属性同名的属性，Svelte 将设置该属性而不是属性。否则就会回落到属性上。那么，以下...

<vaadin-button theme="primary">Primary</vaadin-button>

...被编译为类似：

button.theme = "primary";

通常这很有效，特别是在设置数组和对象属性时。但是，vaadin-button 样式期望设置theme 属性，而不是属性。因为 Svelte 设置了属性，所以样式不适用。

:host([theme~="primary"]) {
  background-color: var(--_lumo-button-primary-background-color, var(--lumo-primary-color));
  color: var(--_lumo-button-primary-color, var(--lumo-primary-contrast-color));
  font-weight: 600;
  min-width: calc(var(--lumo-button-size) * 2.5);
}

我认为这是 Vaadin 的一个错误 - 如果您公开相同数据的属性和属性，那么消费者设置哪一个并不重要。设置属性应该与设置属性具有相同的效果。解决此问题的一个快速方法是让 vaadin-button 反映主题属性，以便该设置theme也设置该属性。以下是如何在Lit中执行此操作。

但是，这种更改需要组件库作者来实现。作为库的使用者，您还可以在 Svelte 中通过使用操作强制Svelte 设置属性来解决此问题。

<script>
  import "@vaadin/button";

  function setAttributes(node, attributes) {
    for (const [attr, value] of Object.entries(attributes))
      node.setAttribute(attr, value);
  }
</script>

<main>
  <vaadin-button use:setAttributes={{ theme: "primary" }}>Primary</vaadin-button>
  <vaadin-button>Normal</vaadin-button>
</main>

如果您需要更深入的解释，我在CSS-Tricks上写了一篇关于此行为和其他解决方法的文章。