Javascript 从JS实例化Web组件_Javascript_Polymer_Web Component

Javascript 从JS实例化Web组件

javascript polymer

Javascript 从JS实例化Web组件,javascript,polymer,web-component,Javascript,Polymer,Web Component,我试图直接从Javascript实例化web组件，但系统找不到公共构造函数。我将用一个简单的例子来说明上下文和结果： HTML模板： <polymer-element name="wc-foo" constructor="Foo" noscript> <template> Hello World! </template> </polymer-element> 你好，世界！ HTML索引： <html&g

我试图直接从Javascript实例化web组件，但系统找不到公共构造函数。我将用一个简单的例子来说明上下文和结果：

HTML模板：

<polymer-element name="wc-foo" constructor="Foo" noscript>
    <template>
       Hello World!
    </template>  
</polymer-element>


你好，世界！

HTML索引：

<html>
<head>
    <script src="general/scripts/polymer/polymer.min.js"></script>
    <link rel="import" href="...">
</head>

<body>  
</body>

<script>
    console.log (window); // (1)
    console.log (window.Foo); // (2)
    var foo = new Foo (); // (3)
</script>

</html>


console.log（窗口）；//(1)
console.log（window.Foo）；//(2)
var foo=new foo（）；//(3)

控制台结果：

（1）我检查了window对象，它包括构造函数Foo:function（）{returnf（a）} （2）我不知道除了window.Foo返回未定义的（3） …因此，new Foo（）失败：未捕获引用错误：未定义Foo

有人能帮我了解问题出在哪里？

谢谢。

您需要等待

polymer ready

事件触发，以确保polymer已完成设置：

document.addEventListener('polymer-ready', function() {
  console.log (window.Foo); // (2)
  var foo = new Foo (); // (3)
  console.log(foo)
});

演示：