Javascript 为什么'；自定义元素在静态页面上是否正常工作？

（原籍，搬到这里）

我正在开发一个库（至少现在是这样），其中我正在创建一组用于渲染3D场景的自定义元素。库注册了两个元素，

[](https://github.com/infamous/infamous/blob/master/src/motor-html/scene.js)

和。对于不支持的浏览器，库依赖于

document.registerElement

polyfill

我有个小问题。当我在Meteor应用程序的

中使用自定义元素时，一切都很好，但是当我尝试使用静态HTML页面和

中手动包含的脚本执行完全相同的操作时，它失败了，无法按预期工作。我不确定我是否做错了什么，对自定义元素不了解，或者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空间中定位：

现在，如果您查看

public

文件夹，您将在

html demo.html

中看到静态版本。您可以使用

文件：//

在浏览器中直接打开此文件，或在运行Meteor应用程序时访问

localhost:3000/html demo.html

。我已经仔细检查过了，我相信我正在做与Meteor版本完全相同的事情，但我根本无法得到预期的结果，它看起来是这样的：

我不确定问题是什么，也不知道为什么它在Meteor版本（Meteor 1.3使用Babel编译代码）中工作，而在静态版本（也通过Webpack使用Babel编译）中不工作

我在

registereElement

调用（）中将

console.logs

添加到

createdCallback

，

attachedCallback

等方法中。这显示了控制台中两种不同的输出顺序

Meteor版本的输出：

静态版本的输出：

可能有装货顺序问题吗？关于何时应调用

registerElement

是否有任何规则？我尝试将静态脚本放在页面的末尾，这会改变输出顺序，但仍然呈现相同的内容（不完整，不像Meteor版本）

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

---

注意：使用polyfill和不使用polyfill时，Meteor和static之间存在相同的不一致行为。

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

那么加载顺序就无关紧要了，您可以将脚本放在任何地方

---

请在此处查看我的答案：

请在此处添加您在GitHub中发布的信息。他们很可能会删除这个问题，然后这个问题就没有任何意义了。@MikeMcCaughan谢谢。我不明白你的问题。自定义元素在静态页面中工作。在您的日志中，我可以看到已注册并创建了自定义元素，因此该问题与

registerement

无关。你应该用一个简单的例子试试。@Supersharp我想他们会的，但有些不同。在Meteor Blaze中，组件稍后会动态添加到页面中。在静态模式中，在提取页面时和解析HTML标记之前，组件存在于标记中。也许我正在与之竞争的某个地方异步发生了一些事情，但我还没有发现这是什么。Thanks@MarcG! 在您链接的答案中，您使用ES6类语法来定义自定义元素。这是怎么回事？我以为

document.registerement

只接受名称和原型，而不接受类构造函数？如果

CustomX

是您的类：

document.registerement（“custom-x”，CustomX）有趣的是，它可以在Chrome中运行，并启用了实验性JavaScript（所以还没有准备好投入生产，除非它也可以使用ES5构造函数模式）。类
constructor（）{}
不会被触发；浏览器以某种方式绕过了这一点。在我的测试中，它启动了
createdCallback
，而没有启动
构造函数。到目前为止，我找到的文档显示了为options对象提供
原型的方法，我还从某个地方读到，由于
document.registerElement
的工作方式，类不受支持，这显然不再正确。这是在哪里记录的？似乎
document.registerement
返回了一个新的构造函数，如果我们想创建新实例，就需要使用它。我想我们不能使用原始的类构造函数？编辑：有趣的是，当我试图像在
document.body.appendChild（new CustomX（））
中那样直接使用该类时，Chrome抛出
未捕获引用错误：未定义该类，错误指向具有构造函数定义的行。我最终使用了这个模式：@trusktr在任何情况下，你解决了你原来的问题吗？