Introduction
Lightning Web Components (LWC) has released version 62.0, which brings a more efficient method of accessing and modifying a component's host CSSStyleDeclaration directly through the use of the this.style Property. Using styles is made easier with this improvement, regardless of whether you are working with the light or shadow DOM.
In previous versions (61.0 and before), accessing styles required more complex syntax like this.children[0].parentElement.style for light DOM or this.template.host.style for shadow DOM. Regardless of the Simplifies DOM mode, you can now effortlessly handle component styling with this.style .
Here's an example to illustrate this update:
import { LightningElement } from 'lwc';
export default class MyComponent extends LightningElement {
static renderMode = 'light'; // default is 'shadow'
setStyle() {
this.style.setProperty('color', 'red');
this.style.setProperty('border', '1px solid eee');
console.log(this.style.color); // logs "red"
}
renderedCallback() {
this.style.color = 'red';
}
}
Summary
This update simplifies styling, making it more intuitive and efficient for developers working with the latest LWC version .
Comentários