Ich habe Probleme zu verstehen, wann der Zugriff auf den shadowRoot einer Komponente verfügbar ist. Hier ist ein Bild einer Gruppe verschachtelter Komponenten:

Es gibt also eine Handvoll Komponenten:

MortgageDetails: Komponente, die eine Gruppe von 3 anderen Komponenten verbindetMoneyInput - Eingabekomponente mitMenge EtiketteNumWithUnitsInput - Eingabekomponente mitBegriff EtiketteRateInput - Eingabekomponente mitBewertung EtikettePaymentSchedule: Komponente mit entsprechender BezeichnungDateInput: Komponente mitAnfangsdatum Etikette

Ich habe die erstellten und angehängten Methoden mit der Protokollnachricht instrumentiert, die den shadowRoot druckt (sr => ...) und ich bekomme folgendes:

mortgageDetails [FINE]: MortgageDetails created sr => null (:1)
moneyInput [FINE]:  MoneyInput created sr => null (:1)
numWithUnitsInput [FINE]:   NumWithUnitsInput created sr => null (:1)
rateInput [FINE]:   RateInput created sr => null (:1)
paymentSchedule [FINE]: PaymentSchedule created sr => null (:1)
dateInput [FINE]:   DateInput created sr => null (:1)
mortgageDetails [FINE]: MortgageDetails attached with sr => Instance of 'ShadowRoot' (:1)

Die Protokollierung macht Sinn. Die Komponenten werden in einer vernünftigen Reihenfolge erstellt und dann beginnt das Anhängen. Das Problem ist jedoch, dass die Hypothekendaten angehängt werden, bevor der enthaltene moneyInput angehängt wird. Wenn ich eine weitere Protokollanweisung in dieMortgageDetails.attached Ich kann sehen, dass sein enthaltenes MoneyInput-Objekt einen shadowRoot hat:

mortgageDetails [FINE]: Composed moneyInput sr => Instance of 'ShadowRoot' (:1)

Das ist ein Problem für meine Arbeitsweise. Ich benötige ein Initialisierungsereignis in der MoneyInput-Komponente, um in den shadowRoot zu gelangen und einige Handler anzuhängen. Ich kann nicht verwendenerstellt denn shadowRoot ist noch gar nicht gesetzt. Ich versuche es zu benutzenangebracht. Ich habe Code wie diesen derzeit in deranfügen von MoneyInput:

  _amountElement = shadowRoot.querySelector('#money-amount')
    ..onBlur.listen((evt) => reformatAmount())
    ..onFocus.listen((evt) => reformatAmount())
    ..onKeyUp.listen((evt) { if(evt.which == 13) reformatAmount(); });

Da MortgageDetails angehängt wird und MoneyInput noch nicht angehängt wurde, kann eine Instanz von MortgageDetails das enthaltene MoneyInput nicht wie gewünscht verwenden, da es nicht vollständig initialisiert ist. Zum Beispiel in MortgageDetailsaktivieren Sie Ich habe:

(mortgageAmountInput = $["mortgage-amount"] as MoneyInput)
  ..label = r" $ Amount of Loan"
  ..onBlur.listen((_) => recalc())
  ..onFocus.listen((_) => recalc());

Dies schlägt fehl, weil MoneyInput istaktivieren Sie wurde nicht angerufen. Ich denke, was ich wirklich brauche, ist ein Ereignis, das besagt, dass der shadowRoot gesetzt wurde. Dann könnte ich bei diesem Ereignis meine Initialisierung durchführen.

Was fehlt mir im Lebenszyklus von Polymerelementen?