为什么自定义元素在静态页面上不能正常工作？
Why doesn't Custom Element work properly on static page?
（最初来自 https://github.com/w3c/webcomponents/issues/392，移至此处）
我正在开发一个库（在 http://infamous.io, for now at least) in which I'm creating a set of Custom Elements for rendering a 3D scene. The library registers two elements, [<motor-scene>](https://github.com/infamous/infamous/blob/master/src/motor-html/scene.js) and <motor-node>. The library depends on this document.registerElement 用于不支持浏览器的 polyfill。
我有个小问题。当我在 Meteor 应用程序的 <body> 中使用自定义元素时一切正常，但是当我尝试对静态 HTML 页面和手动包含在 <head> 中的脚本执行完全相同的操作时]，它失败了并且没有按预期工作。我不确定我是不是做错了什么，对自定义元素一无所知，还是 API.
有问题
要查看工作演示，只需
git clone git@github.com: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 中的位置符合预期 space：
现在，如果您查看 public 文件夹，您会在 html-demo.html 中看到静态版本。您可以使用 file:// 在浏览器中直接打开它，或者在 运行 Meteor 应用程序时访问 localhost:3000/html-demo.html。我已经仔细检查过，我相信我正在做与 Meteor 版本中完全相同的事情，但我根本无法获得预期的结果，它看起来像这样：
我不确定问题出在哪里，以及为什么它在 Meteor 版本（Meteor 1.3 使用 Babel 编译代码）中工作，而在静态版本（也通过 Webpack 使用 Babel 编译）中不工作。
我在 registerElement 调用 (for example) 中的 createdCallback、attachedCallback 等方法中添加了 console.logs。这显示了控制台中两种不同的输出顺序。
Meteor 版本的输出：
静态版本的输出：
会不会是加载顺序有问题？关于什么时候应该调用 registerElement 有什么规则吗？我尝试将静态脚本放在页面末尾，这改变了输出顺序，但仍然呈现相同的东西（损坏，不像 Meteor 版本）。
有什么想法吗？关于自定义元素，有什么我不知道的吗？为什么静态示例与 Meteor 示例不一样？
注意：在使用 WebReflection/document-register-element polyfill 和不使用时，我在 Meteor 和 static 之间得到了相同的不一致行为。
如果您的问题确实是正在创建的元素之间的竞争条件，那么您的元素可能会等到 all 它所依赖的其他元素是 created/attached。
那么加载顺序就无关紧要了，您可以将脚本放在任何地方。
在这里查看我的回答：
（最初来自 https://github.com/w3c/webcomponents/issues/392，移至此处）
我正在开发一个库（在 http://infamous.io, for now at least) in which I'm creating a set of Custom Elements for rendering a 3D scene. The library registers two elements, [<motor-scene>](https://github.com/infamous/infamous/blob/master/src/motor-html/scene.js) and <motor-node>. The library depends on this document.registerElement 用于不支持浏览器的 polyfill。
我有个小问题。当我在 Meteor 应用程序的 <body> 中使用自定义元素时一切正常，但是当我尝试对静态 HTML 页面和手动包含在 <head> 中的脚本执行完全相同的操作时]，它失败了并且没有按预期工作。我不确定我是不是做错了什么，对自定义元素一无所知，还是 API.
要查看工作演示，只需
git clone git@github.com: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 中的位置符合预期 space：
现在，如果您查看 public 文件夹，您会在 html-demo.html 中看到静态版本。您可以使用 file:// 在浏览器中直接打开它，或者在 运行 Meteor 应用程序时访问 localhost:3000/html-demo.html。我已经仔细检查过，我相信我正在做与 Meteor 版本中完全相同的事情，但我根本无法获得预期的结果，它看起来像这样：
我不确定问题出在哪里，以及为什么它在 Meteor 版本（Meteor 1.3 使用 Babel 编译代码）中工作，而在静态版本（也通过 Webpack 使用 Babel 编译）中不工作。
我在 registerElement 调用 (for example) 中的 createdCallback、attachedCallback 等方法中添加了 console.logs。这显示了控制台中两种不同的输出顺序。
Meteor 版本的输出：
静态版本的输出：
会不会是加载顺序有问题？关于什么时候应该调用 registerElement 有什么规则吗？我尝试将静态脚本放在页面末尾，这改变了输出顺序，但仍然呈现相同的东西（损坏，不像 Meteor 版本）。
有什么想法吗？关于自定义元素，有什么我不知道的吗？为什么静态示例与 Meteor 示例不一样？
注意：在使用 WebReflection/document-register-element polyfill 和不使用时，我在 Meteor 和 static 之间得到了相同的不一致行为。
如果您的问题确实是正在创建的元素之间的竞争条件，那么您的元素可能会等到 all 它所依赖的其他元素是 created/attached。
那么加载顺序就无关紧要了，您可以将脚本放在任何地方。
在这里查看我的回答：