vaadin - 带有 vaadin 的 Web 组件和带有 svelte 的汇总 : Primary button ignores theme attribute

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>

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

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

有什么想法吗？？？

Answer 1

发生这种情况是因为 Svelte 如何在自定义元素上设置数据。如果元素上存在与您设置的属性同名的属性，Svelte 将设置属性而不是属性。否则，它将回退到属性。所以，下面...

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

...被编译成类似的东西:

button.theme = "primary";

通常这很有效，尤其是在设置数组和对象属性时。但是，vaadin 按钮样式需要设置 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 反射(reflect)主题属性，以便设置 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>

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