Run Code When a Component Is Created
The constructor()
method fires when a
component instance is created. Don’t add attributes to the host element during construction. You
can add attributes to the host element in any other lifecycle hook.
The constructor flows from parent to child.
These requirements from the HTML: Custom elements
spec apply to the constructor()
.
- The first statement must be
super()
with no parameters. This call establishes the correct prototype chain and value forthis
. Always callsuper()
before touchingthis
. - Don’t use a
return
statement inside the constructor body, unless it is a simple early-return (return
orreturn this
). - Don’t use the
document.write()
ordocument.open()
methods. - Don’t inspect the element's attributes and children, because they don’t exist yet.
- Don’t inspect the element’s public properties, because they’re set after the component is created.
Don’t Add Attributes to Host Element During Construction
You can add attributes to the host element during any stage of the component lifecycle other than construction.
This example is illegal, because it adds an attribute to the host element in the constructor()
.
import { LightningElement } from 'lwc';
export default class Deprecated extends LightningElement {
constructor() {
super();
this.classList.add('new-class');
}
}
This example is legal, because it adds an attribute to the host element in the connectedCallback()
.
import { LightningElement } from 'lwc';
export default class New extends LightningElement {
connectedCallback() {
this.classList.add('new-class');
}
}
No comments:
Post a Comment