防弹 Web 组件 API

Web 组件/自定义元素提供了一些出色的功能，可以使您的用户体验更加高效和可扩展，但也有一些“陷阱”可能会阻止团队获得良好的组件体验。

问题

自定义元素/Web 组件的一大优点有时对他们来说是一个挑战 - 它们可以在任何地方使用。您永远不知道它们是否在框架中、在类型安全的环境中使用、在服务器上使用 PHP 等语言呈现、使用 JavaScript 的 creatElement 函数以编程方式创建，甚至在普通的 HTML 中。

挑战在于没有一致的方法来确保正确实现您的 Web 组件 API。因此，我们组件库的 PR 清单中的一项是：

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

例如，在我们的库中，我们有一个“输入”组件，就像原生的 一样。元素，具有带有一些指定值的 type 属性。它不具有所有相同的选项，因为我们为其他一些控件（如单选按钮和复选框）提供了特定的组件。

/** A string specifying the type of control to render. */
@property()
type:
  | 'color'
  | 'date'
  | 'email'
  | 'number'
  | 'password'
  | 'search'
  | 'tel'
  | 'text' = 'text';

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

当我们测试此属性时，我们得到不一致的结果。

• 设置
  • 一切都按预期进行。

<my-input type="color"></my-input>
<my-input type="date"></my-input>
<my-input type="email"></my-input>
<my-input type="number"></my-input>
<my-input type="password"></my-input>
<my-input type="search"></my-input>
<my-input type="tel"></my-input>
<my-input type="text"></my-input>

• 未设置
  • 由于默认值而未设置属性时，组件可以正常工作
  • 当属性未定义时，组件会正确呈现，因为内部 HTML 元素是有弹性的，但组件中的自定义逻辑和验证会中断

// When the attribute is not set
<my-input></my-input>

// When the property is `undefined` (example using JSX)
<my-input type={undefined}></my-input>

• 设置不当
  • 将 type 属性值设置为“垃圾”会呈现文本输入，但也会破坏我们的自定义逻辑和验证。
  • 将其设置为有效 HTML 输入类型的值，但不是我们为组件指定的值，会呈现不适合我们组件的控件，这不仅会破坏我们的自定义逻辑和验证，还会破坏我们的样式/设计。

<!-- not a real type -->
<my-input type="rubbish"></my-input>

<!-- we don't want users using this type -->
<my-input type="range"></my-input>

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

我们该如何解决它？

我注意到原生 HTML 元素似乎通过了“设置、未设置和设置不当”测试，所以让我们看看是否可以从中学习。

当我错误地设置本机输入的属性并记录属性值时，我可以明白为什么它会起作用。

<!-- set the value to a non-standard type -->
<input type="rubbish" />
<input>



<p>If an invalid value is assigned to the attribute or property, it falls back to a default value. We should be able to do the same and still maintain strong typing.</p>

<p>Let's start by creating a list of valid values and a type for our property.<br>
</p>

<pre class="brush:php;toolbar:false">const inputTypes = [
  'color',
  'date',
  'email',
  'number',
  'password',
  'search',
  'tel',
  'text',
] as const;

我们可以使用数组创建联合类型以进行 TypeScript 验证。

/** A string specifying the type of control to render. */
@property()
type:
  | 'color'
  | 'date'
  | 'email'
  | 'number'
  | 'password'
  | 'search'
  | 'tel'
  | 'text' = 'text';

现在我们可以使用一些验证逻辑来​​更新我们的自定义元素属性。我们可以通过将现有属性转换为标准 JavaScript 类 getter 和 setter 来实现此目的。

<my-input type="color"></my-input>
<my-input type="date"></my-input>
<my-input type="email"></my-input>
<my-input type="number"></my-input>
<my-input type="password"></my-input>
<my-input type="search"></my-input>
<my-input type="tel"></my-input>
<my-input type="text"></my-input>

这是我们的最终输出：

结论

有了这个新的验证，我们的输入组件比以前更具弹性，并且在必要时还允许进行更复杂的验证。对于某些属性，尤其是用于样式的属性，此方法也可能太过分了。对于这些场景，请务必查看这篇文章。

以上是防弹 Web 组件 API的详细内容。更多信息请关注PHP中文网其他相关文章！