Polymer.Element拡張クラスをDOMに接続せずにそのライフサイクルを実行する方法を教えてください。

（質問の目的のための最小限の）この要素考えてみましょう：Polymer.Element拡張クラスをDOMに接続せずにそのライフサイクルを実行する方法を教えてください。

class MyCountDown extends Polymer.Element 
{ 
    static get is() { return 'my-count-down'; } 

    static get properties() 
    { 
    return {  

     time: { /* time in seconds */ 
     type: Number, 
     observer: '_startCountDown' 
     }, 

     remains: Number 
    } 
    } 

    _startCountDown() 
    { 

    this.remains = this.time; 

    this.tickInterval = window.setInterval(() => { 
     this.remains--; 
     if (this.remains == 0) { 
     console.log('countdown!'); 
     this._stopCountDown(); 
     } 
    }, 1000); 
    } 


    _stopCountDown() { 
    if (this.tickInterval) { 
     window.clearInterval(this.tickInterval); 
    } 
    } 
} 

customElements.define(MyCountDown.is, MyCountDown);

私は1つのインスタンスを取得し、プロパティに時間を設定した場合に、

let MyCountDown = customElements.get('my-count-down'); 
let cd = new MyCountDown(); 
cd.time = 5;

プロパティ時間変更オブザーバと_startCountDown（）関数が呼び出されていません。私はポリマーはインスタンスにDOMを添付するのを待っていると思うので、実際にこの要素を文書に追加するとカウントダウンが開始され、5秒後にコンソールには'countdown!'が期待通りに記録されるからです。

私の目標は、MyCountDownのインスタンスが常にビューに添付されていないため、文書には、何も付けずにこのライフサイクルを実行することですが、/、彼らは私のWebアプリケーションの異なるコンポーネント間のライブコードする必要があります。

解決策の1つは、新しいMyCountDownインスタンスをDOMの非表示要素にアタッチしてPolymerのライフサイクルを強制することですが、これは直感的ではないと思います。

出典

2017-06-06 user544262772