カスタム要素がアップグレードされたときにスクリプトを実行する方法

カスタム要素を定義しました。カスタム要素が登録された型にアップグレードされたときにのみスクリプトを実行します。ユースケースは、カスタムメソッドを呼び出す必要があるということです。カスタム要素がアップグレードされたときにスクリプトを実行する方法

私のメインのHTMLファイルには、次のようになります。

<project-list></project-list> 
<script> 
    var project_list = document.getElementsByTagName("project-list")[0] 
    project_list.custom_method("some_data"); 
</script>

カスタム要素は、このようにHTMLのインポートに登録されている：私の質問は簡単です

<script> 
    "use strict"; 
    var currentScript = document._currentScript || document.currentScript; 

    class ProjectList extends HTMLElement { 

    createdCallback(){ 
     console.log("created"); 
    } 

    custom_method(data) { 
     console.log("custom_method() OK"); 
     console.log(data); 

     this.innerHTML = data; 
    } 

    } 

    document.registerElement("project-list", ProjectList); 
</script>

：確認するスクリプトを作成する方法メインのhtmlファイルのカスタム要素がcustom_methodメソッドを取得した後にのみ呼び出されますか？

私は洗練されたソリューションを探しています。スペックの作者が考えていたもの。私はアーキテクチャをかなり変更しても構いません（例えば、javascriptをメインファイルから別のカスタム要素に移動するなど）。メソッド呼び出しの前に登録：

出典

2016-03-04 user6020072

を実装しているブラウザでは、要素を作成して追加すると同期されます。ハードコーディングされたタグの点では、afaikには、 "allComponentsReady"のようなDOMイベントはありません。 1つの方法は、コンポーネント内から 'document'にカスタムイベントを発生させ、カスタムメソッドを必要とするページのコードに対して' onload（） 'イベントのようにそのイベントを使用することです。 reduxのようなものを調べて、多くの異なるウェブコンポーネントやアプリメソッドを吸うことのない方法で結びつけることもできます。 – dandavis

@ダンダビス：これは私がしていることです。しかし、私はまた旗を立てました。フラグが設定されている場合、コンポーネントは既に設定されており、カスタムメソッドは即座に実行できます。それ以外の場合は、イベントが発生したときにスケジュールされます。私は使用しているコードで回答を投稿しました。 – MarcG

@dandavis：多くの異なるWebコンポーネントを配線する：いくつかのwebcomponentは他人に依存している場合、これらすべての他のコンポーネントは、準備が整うまで、それは設定の前に、それは、待たなければなりません/独自のフラグ/イベントを送出します。当然の – MarcG

同期HTMLインポートはため<link>と<script>要素のsyncデフォルトの動作を、@dandavisによって示唆されるように

、あなたは自分の右の順にタグを配置する必要があります。

またはその代わりに、あなたがするときDOMContentLoadedカスタムメソッドを呼び出すことができますかwindow.onloadイベントは以下のように、解雇されています

window.onload = function() 
 
{ 
 
    var project_list = document.getElementsByTagName("project-list")[0] 
 
    project_list.custom_method("some_data")  
 
}

<project-list></project-list> 
 

 
<script> 
 
    "use strict"; 
 
    var currentScript = document._currentScript || document.currentScript; 
 

 
    class ProjectList extends HTMLElement { 
 

 
    createdCallback(){ 
 
     console.log("created"); 
 
    } 
 

 
    custom_method(data) { 
 
     console.log("custom_method() OK"); 
 
     console.log(data); 
 

 
     this.innerHTML = data; 
 
    } 
 

 
    } 
 

 
    document.registerElement("project-list", ProjectList); 
 
</script>

非同期HTMLインポート

いくつかのための場合HTMLインポートファイルを非同期に読み込みたい場合は、link.onloadイベントを待つことができます。この時点で|インポート内の<script>がすでに展開されている場合、カスタム要素が登録され、作成されます。 WebComponents.jsで

<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <link rel="import" href="projectList.html" id="projectList" async> 
    <script> 
    projectList.onload = function() 
    { 
     console.log("import {loaded}") 
     var project_list = document.getElementsByTagName("project-list")[0] 
     project_list.custom_method("some_data") 
    } 
    </script> 
</head> 
<body> 
    <project-list id="pl"></project-list> 
    <script> 
     console.warn("custom_method is " + pl.custom_method) //undefined 
    </script> 
</body> 
</html>

輸入がロードされた後にこのような状況ではポリフィルがすぐに作成されたオブジェクトのインスタンスを作成しません

をポリフィル。代わりに、あなたはWebComponentsReadyイベントに耳を傾ける必要があります。それは、ChromeでのFirefox、IE 11で動作し、また

document.addEventListener("WebComponentsReady", function() 
{ 
    console.log("WebComponentsReady") 
    var project_list = document.getElementsByTagName("project-list")[0] 
    project_list.custom_method("some_data") 
})

。

出典

2016-03-05 00:09:05 Supersharp

これはChromeでは動作しますが、FirefoxではPolymerポリフィルを使用すると機能しません。私は私の答えを更新しましたクロスブラウザソリューションについてhttps://github.com/webcomponents/webcomponentsjs/issues/431 – user6020072

です。 – user6020072

：それは、私は、これがこのバグに関連していると考え、常に非同期 – Supersharp

カスタム要素がアップグレードされたときにスクリプトを実行する方法

答えて

関連する問題