使用 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 attribute，而不是属性。因为 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 中执行此操作。

但是，这种更改需要组件库作者来实现。作为该库的使用者，您还可以通过使用 action 强制 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，如果您想要更深入的解释。

Answer 2

您似乎正在导入 Button 组件的 Material 主题版本。仅当您使用默认 Lumo 主题时，“主要”主题变体才可用。要导入它，请使用 import '@vaadin/button';

对于 Material 主题，您可以使用“outlined”和“contained”主题变体：https://cdn.vaadin.com/vaadin-material-styles/1.3.2/demo/buttons.html