Breaking change in LWC host access
Why is this an issue?
LWC API version 62.0 introduces this.hostElement as the standard way to access a component's host element. This provides a consistent approach across light DOM and shadow DOM components. Previous methods of host element access may not work correctly.
Examples
Example of incorrect code:
// Old approach - may not work in API 62.0+
renderedCallback() {
const host = this.template.host;
host.classList.add('active');
}
Example of correct code:
// New approach using this.hostElement
renderedCallback() {
this.hostElement.classList.add('active');
}
How can I fix violations?
Replace
this.template.hostwiththis.hostElement.Ensure your component uses API version 62.0 or later.
When should I disable this rule?
You may dismiss specific violations if your component must support older API versions, but plan to migrate.
Resources