爲什麼自定義元素不能在靜態頁面上正常工作？

-1

（最初從https://github.com/w3c/webcomponents/issues/392，搬到這裏）爲什麼自定義元素不能在靜態頁面上正常工作？

我的工作庫（在http://infamous.io，至少現在），其中我創建了一套自定義元素的渲染3D場景。庫註冊兩個元素，[<motor-scene>](https://github.com/infamous/infamous/blob/master/src/motor-html/scene.js)和<motor-node>。該庫取決於document.registerElement用於非支持瀏覽器的polyfill。

我有一個小問題。當我在Meteor應用程序的<body>中使用自定義元素時，一切正常，但當我嘗試使用靜態HTML頁面和<head>中手動包含的腳本完全相同時，它失敗並且無法按預期工作。我不確定自己是否做錯了什麼，不知道自定義元素的相關信息，或者API有問題。

要看到工作演示，只是

git clone [email protected]:trusktr/site.git 
cd site 
git checkout infamous-motor-html # it's on this branch. 
npm install 
meteor # meteor is really easy to install, meteor.com 
# visit localhost:3000

結果看起來是這樣的，在藍綠色和粉紅色的元素定位爲在3D空間中預計：

working

現在，如果你看在public文件夾中，您將看到html-demo.html中的靜態版本。您可以在瀏覽器中直接打開file://，或者在運行Meteor應用程序時訪問localhost:3000/html-demo.html。我有雙重檢查，我相信我做同樣的事情如流星版本，但我根本無法得到預期的結果，它看起來像這樣：

not-working

我不是確定問題是什麼，以及它爲什麼在Meteor版本中工作（Meteor 1.3使用Babel編譯代碼）並且在靜態版本中不起作用（也通過Webpack與Babel編譯）。

我已經添加console.logs到createdCallback，attachedCallback，在registerElement電話等的方法（for example）。這顯示控制檯中輸出的兩種不同順序。

輸出爲流星版本：

meteor-output

輸出爲靜態版本：

static-output

莫不是一個加載順序問題？在registerElement應該被調用時是否有任何規則？我嘗試將靜態腳本放置在頁面的末尾，這會改變輸出順序，但仍呈現相同的效果（已損壞，不像Meteor版本）。

任何想法？是否有一些我不知道的自定義元素？爲什麼靜態示例與Meteor示例不一樣？

注意：當使用WebReflection/document-register-element填充時，我得到流星和靜態之間相同的不一致行爲，當不使用填充時。

來源

2016-02-22 trusktr

請添加你放在GitHub的問題，這裏的信息。他們可能會很好地刪除這個問題，然後這個問題就沒有任何意義了。 –

@MikeMcCaughan謝謝。更新。 – trusktr

我不明白你的問題。自定義元素在靜態頁面中工作。在您的日誌中，我可以看到自定義元素已註冊並創建，因此問題與「registerElement」無關。你可以嘗試一個簡單的例子。 – Supersharp

如果確實你的問題是創建元素之間的競爭條件，那麼你的元素可能會等到所有它所依賴的其他元素被創建/附加。

然後都不會有問題的加載順序，你將能夠在任何地方放置你的腳本。

見我的答案在這裏：How to execute a script when the custom element is upgraded

來源

2016-03-06 23:49:59 MarcG

謝謝@ MarcG！在你連接的答案中，你使用ES6 Class語法來定義你的自定義元素。這是如何運作的？我認爲'document.registerElement'只接受名稱和原型，而不是類構造函數？ – trusktr

如果'CustomX'是你的類：'document.registerElement（「定製-X」，CustomX）;' – MarcG

有趣的是，它在Chrome瀏覽器的實驗啓用JavaScript（所以沒有準備好生產，除非它也與ES5構造模式的工作原理）。類'constructor（）{}'不會被解僱;瀏覽器以某種方式繞過。在我的測試中，它在不觸發構造函數的情況下觸發'createdCallback'。到目前爲止，我已經找到了文檔顯示提供的選項以'prototype'對象的方法，我也讀的地方，類不支持因document.registerElement''如何工作的，這顯然是不正確的了。這在哪裏記錄？ – trusktr

爲什麼自定義元素不能在靜態頁面上正常工作？

回答

相關問題