javascript - 无法从页面调用 Webcomponent 方法

Question

我尝试制作一个简单的网络组件(使用 webcomponents.js v 0.7.23)。该组件有一个方法 (setTitre())。如果我在启动时在我的 HTML 页面中调用此方法，Chrome 是可以的，但 FF 和 IE 会说该函数未定义。如果我从控制台调用此方法 (document.querySelector('hello-world').setWho('new'))，它在所有浏览器中都可以。

代码在这里:https://github.com/olofweb/Webcomponents

Answer 1

使用 webcomponentsjs polyfill，您需要在调用自定义元素方法之前等待 WebComponentsReady 事件:

document.addEventListener( 'WebComponentsReady', function () 
{
    document.querySelector('hello-world').setTitre()
} )

这是由于使用非原生实现时自定义元素的异步升级所致。