带有 vaadin 和带有 svelte 的汇总的 Web 组件：主按钮忽略主题属性

Question

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

npx degit sveltejs/template my-svelte-project

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

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

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

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

Answer 2

发生这种情况是因为 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 中解决此问题，方法是使用 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>

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

带有 vaadin 和带有 svelte 的汇总的 Web 组件：主按钮忽略主题属性

Web components with vaadin and rollup with svelte: Primary button ignores theme attribute

rollup

vaadin

web-component

svelte