Why is the behavior of a LWC's SLDS styling inconsistent between a scratch org and a non-scratch org?

Question

I have the same Lightning Web Component in a scratch org (developer edition) and a non-scratch org (enterprise edition). The density setting of each org is the same: Comfy. That's also the density setting for my user in each org.

The component exhibits the desired spacing/padding in the scratch org, but not in the other org. The overall component is a set of nested components. I provided the HTML, views in each org, and browser inspections of the innermost component below.

One thing to highlight is that the slds-gutters_x-small class, as indicated in the browser inspection, is automatically applied to the component when it loads in the scratch org. I did not explicitly set that class on any element, in any of the set of components. All the components are exactly the same between the orgs.

The presence of that slds class technically seems to be making the difference. When that styling is removed via browser inspection, the component in the scratch org looks as it does in the other org, i.e. devoid of the expecting padding.

Why is the component loading differently in terms of styling between the orgs?

Component HTML

<template>
    <div class="slds-card slds-has-top-magnet slds-has-bottom-magnet">
        <div class="slds-grid slds-grid_vertical-align-center slds-border_bottom">
            <div class="slds-col slds-grid slds-grid_vertical-align-center slds-size_4-of-12">
                <div class="slds-truncate slds-p-vertical_x-small">
                    <label class="slds-checkbox-button" for={skill.id}>
                        <input type="checkbox" class="slds-assistive-text" id={skill.id} value={skill.id} />
                        <span
                            class="slds-icon_container slds-icon-utility-add slds-current-color"
                            title="Gives visual feedback as to whether the skill in this row has been added"
                        >
                            <lightning-icon icon-name="utility:add" size="x-small"></lightning-icon>
                            <span class="slds-assistive-text">Skill Added</span>
                        </span>
                    </label>
                </div>
                <div class="slds-col slds-text-heading_small">{skill.label}</div>
            </div>
            <div class="slds-col slds-size_4-of-12">
                <lightning-combobox
                    class="slds-text-heading_small slds-text-color_weak"
                    name="rating"
                    label="Rating"
                    placeholder="Select an Option"
                    value={value}
                    onchange={handleChange}
                    options={options}
                    variant="label-hidden"
                >
                </lightning-combobox>
            </div>
            <div class="slds-col slds-size_4-of-12">
                <lightning-input type="text" label="Enter some text" variant="label-hidden"></lightning-input>
            </div>
        </div>
    </div>
</template>

Loaded in the Scratch Org

Inspected in the Scratch Org

Loaded in the Non-scratch Org

Inspected in the Non-scratch Org

Answer 1

Since you mentioned that your component is a nested component, it might be that the parent components would have used the slds-gutter-* style class. So please check all the parent components as well.

LEX uses synthetic shadow DOM and not native shadow DOM. Because of this, only the custom styles that you define at the component level are encapsulated. Global Styles like SLDS and stylesheets imported using loadStyle are applied globally and can penetrate through the shadow boundaries.

For reference: parent.html

<template>
    <div class="slds-gutters_large">
        <c-child></c-child>
    </div>
</template>

child.html

<template>
    <div class="slds-grid">
        <div class="slds-col">abc</div>
    </div>
</template> 

and in the browser, you can see that even though child.html doesn't use the gutter class, gutter style is applied from the parent.

For more information on Global, Scoped styles, Cascading and Inheritance, watch this session by me and Alba - https://www.youtube.com/watch?v=T7OGDMRnjT4 where we explained those concepts in detail.