我有一个带有动态商品属性的自定义元素。元素具有删除选项。 当用户单击Delete时,此元素的父元素的CSS会更改,与此同时,此元素的某些属性也会更改。
如果该项得到更新,我想将自定义元素恢复到其原始状态。现在,我只能想到手动更新父元素的CSS和元素本身的属性。
我在商品更新上尝试过this.requestUpdate()方法。似乎没有帮助。
这是我在文档中发现的,我认为这是造成这种行为的原因。然后,lit-html通过一次创建静态DOM并仅聪明地更新DOM的更改部分来确保更新是快速的。
示例
<parent-element class="deleted">
<my-element .item=${item1} .removable=false .restorable=true></my-element>
</parent-element>
项目更新后-实际DOM
<parent-element class="deleted">
<my-element .item=${item2} .removable=false .restorable=true></my-element>
</parent-element>
项目更新后-预期的DOM
<parent-element>
<my-element .item=${item2} .removable=true .restorable=false></my-element>
</parent-element>
我认为这是一个相当普遍的情况,只是无法解决,除非手动更新可能会导致混乱,如果要更改很多属性。任何帮助,将不胜感激。 谢谢。