In Polymer 2 mode, only live callback is triggered
When I create a Polymer 2.0 element, only the lifecycle callback fires ready
and I can't figure out why. For example, I have this polymer element:
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<dom-module id="flip-four-board">
<script>
class FlipFourBoard extends Polymer.Element {
static get is() { return "flip-four-board"; }
created() {
super.created();
console.log("created");
}
ready() {
super.ready();
console.log("ready");
}
attached() {
super.attached();
console.log("attached");
}
detached() {
super.detached();
console.log("detached");
}
}
customElements.define(FlipFourBoard.is, FlipFourBoard);
</script>
</dom-module>
But when I paste it into a page like this:
<!DOCTYPE html>
<html>
<head>
<title>Flip Four Board Tests</title>
<script src="../../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../flip-four-board.html">
<style type="text/css">
html, body {
width: 95%;
height: 95%;
}
</style>
</head>
<body>
<flip-four-board></flip-four-board>
</body>
</html>
The console only reads:
Why only firing the callback ready
?
+3
source to share
1 answer
Polymer 2.0 introduces several lifecycle callback changes , including replacing all but one of the original callbacks (i.e. ready
) with class-based ones. Inherited callbacks are still available with the Polymer
factory method in version 2.0.
1.x (legacy) | 2.x
----------------------|-----------------------------
created | constructor
attached | connectedCallback
detached | disconnectedCallback
attributeChanged | attributeChangedCallback
ready | ready
So your class should look something like this:
class FlipFourBoard extends Polymer.Element {
static get is() { return "flip-four-board"; }
constructor() {
super();
console.log("created");
}
ready() {
super.ready();
console.log("ready");
}
connectedCallback() {
super.connectedCallback();
console.log("attached");
}
disconnectedCallback() {
super.disconnectedCallback();
console.log("detached");
}
}
+17
source to share