shadowRoot何时可用于聚合物组件？

Question

我无法理解何时可以访问组件的shadowRoot。这是一组嵌套组件的图像：

所以有一些组件：

1. MortgageDetails：组件将一组3个其他组件绑定在一起
2. MoneyInput - 输入 Amount 标签的组件
3. NumWithUnitsInput - 输入 Term 标签
的组件
4. RateInput - 输入 Rate 标签
的组件
5. PaymentSchedule：具有相应标签的组件
6. DateInput：开始日期标签
的组件

我已经使用日志消息打印了shadowRoot（ sr =＆gt; ... ），对已创建和附加的方法进行了检测，并得到以下信息：

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)

日志记录很有意义。组件以合理的顺序创建，然后开始附加。但问题是，抵押贷款细节是在其附加的moneyInput附加之前附加的。如果我在 MortgageDetails.attached 中再添加一个日志语句，我可以看到它包含的MoneyInput对象有一个shadowRoot：

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

这是我正在做事的方式的问题。我需要在MoneyInput组件中使用一些初始化事件来访问shadowRoot并附加一些处理程序。我无法使用 created ，因为还没有设置shadowRoot。我正在尝试使用附加。我目前在MoneyInput的 attach 中有这样的代码：

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

由于附加了MortgageDetails且尚未附加MoneyInput，因此MortgageDetails的实例无法使用所包含的MoneyInput，因为它未完全初始化。例如，在MortgageDetails activate 中我有：

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

此操作失败，因为尚未调用MoneyInput的激活。我认为我真正需要的是一个事件，表明已经设置了shadowRoot，然后在那个事件上我可以进行初始化。

我在聚合物元素的生命周期中缺少什么？

Answer 1

通常，如果您要延长PolymerElement，主要回调的顺序将是ready，created，attached。这些发生在自上而下：他们在后代之前呼唤祖先。首先调用ready可能会让人感到困惑，但这是因为PolymerElement.created在设置DOM甚至处理程序之后调用它，并且因为在类{{1}之前发生的构造函数排序构造函数。

Polymer还添加了一个created方法，您可以覆盖该方法，在保证创建元素的子元素时调用该方法。这可能就是你所需要的。

有关生命周期方法的详细信息，请参阅http://www.polymer-project.org/docs/polymer/polymer.html#lifecyclemethods。

首先，我会看看你是否可以回避数据绑定和声明性事件的排序问题。

Answer 2

我发现您的描述很难理解，但通常在attached调用super.attached();后，所有内容都已正确初始化。

如果您能提供允许重现问题的最小代码，那么提出具体建议会更容易。

在核心元素（JavaScripts）ready()中，大部分时间都使用回调而不是attached。由于attached（enteredView）从未让我失望，我还没有调查过哪个被提前/稍后调用。