javascript Polymer 和 WebComponentsReady 事件

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/21763690/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 21:38:21  来源:igfitidea点击:

Polymer and WebComponentsReady event

javascripthtmlpolymerweb-component

提问by bitpshr

According to the Polymer docs, the WebComponentsReadyevent is necessary because...

根据聚合物文档,该WebComponentsReady事件是必要的,因为......

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

polyfills 解析元素定义并异步处理它们的升级。如果您在 DOM 有机会升级之前过早地从 DOM 中获取元素,您将使用 HTMLUnknownElement。在这些情况下,在与元素交互之前等待 WebComponentsReady 事件

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:

我有一个 HTML 页面,它导入单个 Web 组件并注册一个处理程序,该处理程序在加载所有 Web 组件时记录一条语句:

<!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 WebComponentsReadyevent firing before my-element's readypolymer event?I need to know when I can interact with the custom element, e.g. change its properties and call its public methods.

为什么WebComponentsReady事件在 my-element 的ready聚合物事件之前触发?我需要知道何时可以与自定义元素进行交互,例如更改其属性并调用其公共方法。

回答by

In Polymer 1.0 you can just listen for WebComponentsReady.

在 Polymer 1.0 中,您可以只收听WebComponentsReady.

In Polymer 0.5, because it does more things asynchronously, there's an extra event called polymer-readywhich will fire when your elements are loaded. Here's a jsbin showing the order.

在 Polymer 0.5 中,因为它异步执行更多操作,所以有一个额外的事件polymer-ready会在您的元素加载时触发。这是一个显示订单的jsbin