lit-element - 如何知道属性何时从其连接属性更新？

Question

鉴于：

@property({type: Boolean, attribute: 'some-attr'}) someAttr = false;

一旦值在 DOM 中更新，我期待看到updated被解雇。'some-attr'

但是，updated根本不会被解雇。

我的期望是错误的，还是我应该以不同的方式进行设置？

Answer 1

查看 Elm对 properties 与 attributes 的讨论、模块函数的文档Html.Attributesattribute以及Elm 关于自定义元素的文档，我很确定这是由于简单地将 elm 表达式绑定到some-attr基于 LitElement 的自定义元素的属性。即DOM 属性将始终存在，因此相应的属性始终为true。

（通过提供给装饰器激活）的默认转换Booleantype:Boolean器模仿用作标志的 HTML 属性的行为（例如disabled，在<input>元素上）：如果属性存在（无论值如何），则设置标志 ( true)。如果您想在源代码中查看它，实现非常简单：https ://github.com/Polymer/lit-element/blob/master/src/lib/updating-element.ts#L163

我看到这些选项可以解决您的问题：

1. 在 Elm 中实现一些额外的逻辑来添加/删除属性的存在。
2. 为基于 LitElement 的自定义元素创建您自己的属性转换器。
3. 使用另一个默认转换器（例如 for String，“默认”默认转换器）并在 LitElement 内部实现自定义逻辑（例如使用派生值）。

在这三个选项中，我通常会推荐第一个，因为您的自定义元素仍然表现自然，即如果some-attr应该是一个标志（布尔属性），那么遵循哪个 HTML 语义，它应该由它的存在定义，而不是它的值. 这允许您在其他项目中重复使用它，而不会让其他开发人员感到惊讶。

话虽如此，当然可能存在更重要的项目特定要求。例如，如果您只在这个带有 Elm 的项目中使用此自定义元素，您的成功之路可能会更快地选择选项 2 或 3。