Question

（最初来自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>。对于不支持的浏览器，该库依赖于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空间中按预期定位：

working

现在，如果查看public文件夹，您将在html-demo.html中看到静态版本。您可以使用file://直接在浏览器中打开此内容，也可以在运行Meteor应用时访问localhost:3000/html-demo.html。我已经进行了双重检查，我相信我的行为与Meteor版本完全一样，但我无法获得预期的结果，看起来像这样：

not-working

我不确定问题是什么，以及为什么它在Meteor版本中运行（Meteor 1.3使用Babel编译代码）并且不在静态版本中工作（也通过Webpack与Babel一起编译））。

我已将console.logs添加到createdCallback电话（for example）中的attachedCallback，registerElement等方法中。这显示了控制台中两种不同的输出顺序。

Meteor版本的输出：

meteor-output

静态版本的输出：

static-output

是否存在加载顺序问题？关于何时应该调用registerElement是否有任何规则？我尝试将静态脚本放在页面的末尾，这会更改输出顺序，但仍会呈现相同的内容（损坏，不像Meteor版本）。

有什么想法吗？有什么关于自定义元素的东西我不知道吗？为什么静态示例与Meteor示例不同？

注意：当使用WebReflection/document-register-element polyfill时，我在Meteor和static之间会出现相同的不一致行为，而不是。

Answer 1

如果你的问题确实是在创建元素之间的竞争条件，那么你的元素可能会等到所有它所依赖的其他元素被创建/附加。

然后它不会影响加载顺序，您可以将脚本放在任何位置。

请在此处查看我的回答：How to execute a script when the custom element is upgraded

为什么自定义元素在静态页面上无法正常工作？

1 个答案: