不要依赖默认属性值来设置 Web 组件的样式

别误会我的意思，我对 Web 组件 API 的默认值没有任何反对意见。我对他们的问题是他们不可靠。

问题

为 API 提供可用选项列表的常见方法是使用 TypeScript 的 untion 类型。

/** The display variant for the button */
@property({reflect: true})
variant: 'default' | 'solid' | 'ghost' = 'default';

这里有一些基本的 CSS 来使这些变体发挥作用。

:host {
  --accent-color: #0265dc;
}

button {
  cursor: pointer;
  padding: 0.5rem;
}

:host([variant='default']) button {
  border: solid 1px var(--accent-color);
  background-color: white;
  color: var(--accent-color);
}

:host([variant='solid']) button {
  border: solid 1px var(--accent-color);
  background-color: var(--accent-color);
  color: white;
}

:host([variant='ghost']) button {
  border: solid 1px transparent;
  background-color: transparent;
  color: var(--accent-color);
}

注意：代码示例使用 Lit，但这里讨论的原理可以轻松应用于其他库和框架。

挑战是自定义元素/Web 组件可以在任何地方使用。它们可以以字符串、服务器端语言（如 PHP）插入到 DOM 中，可以在 JavaScript 的 createElement 函数中创建，甚至可以在标准 HTML 中创建。我的意思是，并不总是有一种“类型安全”的方法来确保准确设置自定义元素属性。因此，我们组件库的 PR 清单中的一项是：

✅ 属性和属性在设置、取消设置和设置不当时都有效。

测试我们的 API

根据这些准则，让我们测试上面的 API 设置。

• 设置 - 一切看起来都很好。

<my-button variant="default">Default Button</my-button>
<my-button variant="solid">Solid Button</my-button>
<my-button variant="ghost">My Button</my-button>

• 未设置
  • 没有设置属性，它可以正常工作，因为我们有一个默认值，并且它被配置为在设置时反映元素上的属性。
  • 如果我们将变量属性设置为未定义，则会破坏样式。

<!-- No attribute set -->
<my-button>No Attribute Button</my-button>

<!-- JSX example -->
<my-button variant="{undefined}">Unset Button</my-button>

• 设置不当 - 当我们将变体属性设置为“垃圾”时，它也会崩溃。

<my-button variant="rubbish">Rubbish Button</my-button>

您可以在这里测试这个示例：

修复 API

解决此问题的最简单方法是使按钮元素样式与默认样式匹配。

button {
  border: solid 1px var(--accent-color);
  background-color: white;
  color: var(--accent-color);
  cursor: pointer;
  padding: 0.5rem;
}

现在我们可以删除默认变体的代码。

/* We can remove this */
:host([variant='default']) button {
  border: solid 1px var(--accent-color);
  background-color: white;
  color: var(--accent-color);
}

为了避免混淆，您可以留下样式并添加评论。

/* Styles for this variant are under the `button` element */
:host([variant='default']) { }

我们还可以更新 TypeScript API，使其成为可选并删除默认值。

/** The display variant for the button */
@property({ reflect: true })
variant?: 'default' | 'solid' | 'ghost';

现在，如果值已设置、未设置或设置不当，元素的行为将保持一致！

您可以在此处查看最终代码：

结论

通过删除对默认值的依赖，您可以创建更具弹性的 Web 组件 API。如果您的组件必须具有默认值才能正常运行，请务必查看本文以创建一致工作的 Web 组件。

以上是不要依赖默认属性值来设置 Web 组件的样式的详细内容。更多信息请关注PHP中文网其他相关文章！