How to Remove Page Template Margins in Salesforce Lightning? 

Hey Salesforce devs! 👋

I recently encountered an issue with Salesforce’s page template margins. Whenever I added my Lightning Web Component (LWC) to a page, the default template margins made the layout look a bit off. I wanted a cleaner design where the margins were removed automatically when my component loaded.

Here’s what I did: 

The Fix:

I found that the CSS class .slds-template_default was responsible for the margins. To override it, I used the connectedCallback() lifecycle hook in my LWC to dynamically inject custom CSS. Here's the code:

connectedCallback() {
    // Create a <style> element
    const style = document.createElement('style');
    // Override the default padding/margins for the template
    style.innerText = `
        .slds-template_default {
            padding: 0 !important;
        }
    `;
    // Append the style element to the document head
    document.head.appendChild(style);
}