如何在创建WebComponent时将一个变量传递给WebComponent？

Question

我有一个webcomponent Login，它有一个LoginState字段。我想传入一个LoginState实例，该实例可能会在代码的其他部分中设置，并在创建的方法之前/期间将其添加到Login实例中。

这可能吗？如果不是，我的替代品是什么？我唯一能想到的另一个方法是使用一个全局变量来保存LoginState实例和引用，这似乎不是一个好主意。

Answer 1

这的确是可能的，实例化的组件时，请使用语法

<x-custom-element a-field-name="{{expression}}"></x-custom-element> 

表达进行评估，以及您在CustomElement类中定义的名称aFieldName将价值被初始化任何字段{{expression}}（see relevent discussion）。就个人而言，我不会建议通过类似于您的登录状态的东西，因为它会让您的网站难以置信地受到XSS攻击......

也许更好的办法是在您的组件类上公开一个允许您设置的方法初始化后的登录状态。将元素插入DOM后，您可以使用query('#myLoginStateId').xtag访问元素的字段，然后使用您的登录状态调用暴露的方法。

在元素插入到DOM之前，您将无法访问元素上的xtag，因此请确保在元素的inserted（）方法中引发适当的事件，以便应用程序的其余部分知道它何时安全地设置适当的领域。