SPEC | POLYMER | CALLED WHEN |
---|---|---|
createdCallback | created | An instance of the element is created. |
- | ready | The has been fully prepared (e.g. shadow DOM created, property observers setup, event listeners attached, etc). |
attachedCallback | attached | An instance of the element was inserted into the DOM. |
- | domReady | Called when the element’s initial set of children are guaranteed to exist. This is an appropriate time to poke at the element’s parent or light DOM children. Another use is when you have sibling custom elements (e.g. they’re.innerHTML ‘d together, at the same time). Before element A can use B’s API/properties, element B needs to be upgraded. The domReady callback ensures both elements exist. |
detachedCallback | detached | An instance was removed from the DOM. |
attributeChangedCallback | attributeChanged | An attribute was added, removed, or updated. Note: to observe changes to published properties, use changed watchers. |
The polymer-ready event
Polymer parses element definitions and handles 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
. Polymer elements also support inline resources, such as stylesheets, that need to be loaded. These can causeFOUC issues if they’re not fully loaded prior to rendering an element. To avoid FOUC, Polymer delays registering elements until stylesheets are fully loaded.
To know when elements have been registered/upgraded, and thus ready to be interacted with, use the
polymer-ready
event.
rel="import" href="path/to/x-foo.html">