Polymer和WebComponentsReady事件 [英] Polymer and WebComponentsReady event
问题描述
WebComponentsReady
polyfills解析元素定义并异步处理它们的升级。如果您在DOM有可能升级之前过早地从DOM获取元素，那么您将使用HTMLUnknownElement。在这些情况下，在与元素进行交互之前等待WebComponentsReady事件
我有一个导入单个Web组件和寄存器的HTML页面一个处理程序，可以在加载所有Web组件时记录语句：
<！DOCTYPE html>
< html>
< head>
< script src =bower_components / platform / platform.js>< / script>
< link rel =importhref =elements / my-element.html>
< / head>
< body unresolved>
< my-element>< / my-element>
< script>
window.addEventListener（'WebComponentsReady'，函数（e）{
console.log（'components ready'）;
}）;
< / script>
< / body>
< / html>
为什么 WebComponentsReady 事件在我的元素的准备好聚合物事件之前发射？我需要知道什么时候可以与自定义元素进行交互，例如改变它的属性并调用它的公共方法。
解决方案在Polymer 1.0中，您可以听取 WebComponentsReady 。
在Polymer 0.5中，因为它异步执行更多的事情，所以有一个额外的事件叫做 polymer-ready 当你的元素被加载时它会被触发。这是显示订单的jsbin 。
According to the Polymer docs, the WebComponentsReady event is necessary because...
The polyfills parse element definitions and handle their upgrade asynchronously. If you prematurely fetch the element from the DOM before it has a chance to upgrade, you’ll be working with an HTMLUnknownElement. In these situations, wait for the WebComponentsReady event before interacting with the element
I have an HTML page that imports a single web component and registers a handler that logs a statement when all web components are loaded:
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/platform/platform.js"></script>
<link rel="import" href="elements/my-element.html">
</head>
<body unresolved>
<my-element></my-element>
<script>
window.addEventListener('WebComponentsReady', function(e) {
console.log('components ready');
});
</script>
</body>
</html>
Why is the WebComponentsReady event firing before my-element's ready polymer event? I need to know when I can interact with the custom element, e.g. change its properties and call its public methods.
解决方案 In Polymer 1.0 you can just listen for WebComponentsReady.
In Polymer 0.5, because it does more things asynchronously, there's an extra event called polymer-ready which will fire when your elements are loaded. Here's a jsbin showing the order.
这篇关于Polymer和WebComponentsReady事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
