如何在創建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（）方法中引發適當的事件，以便應用程序的其餘部分知道它何時安全地設置適當的領域。