如何使用"hidden"属性？

Question

我可以看到官方聚合物元素正在使用 hidden 属性，如下所示：

hidden$="[[!someValue]]" 和 hidden$=[[someValue]]

然而，在我的例子中，someValue 是一个巨大的对象，虽然上面的表达式仍然有效，但对于 hidden$=[[someValue]] 我可以看到这样的东西：

应用程序会做一些不必要的工作来序列化该对象 + 拥有所有这些文本让我更难使用 DevTools。

所以，我改用了hidden=[[someValue]]和hidden=[[!someValue]]。这些工作就像一个魅力。

我的问题是：

• 我可以安全地使用 hidden= 而不是 hidden$= 吗？
• 为什么这甚至有效？我理解 $= 设置属性，= 设置属性。
• 如果我应该使用 hidden$= 最好的方法是什么 hidden$=[[bigObject]]？

Answer 1

看起来您可以安全地使用 hidden 属性或 属性。来自 webcomponentsjs 库的 This polyfill 表示设置 属性 也会反映到该属性。这可以解释为什么 $= 和 = 具有相同的行为。

由于 setter 将值覆盖为 ''，我希望设置 属性 (=) 会使用更少的内存并提高性能，但是显然，基准测试是唯一可以确定的真实方法。