I have a lightning web component that renders extra attributes in its HTML elements (as expected) which is the correct behavior according to the documentation:
To ensure CSS encapsulation, each element has an extra attribute, which also increases rendering time. For example, the element has a c-parent_parent-host attribute.
For some reason the same component does not render the extra attributes when deployed to another developer sandbox. This results in the component's styles defined in the bundled CSS file not getting applied and causing UI issues.
Sandbox 2 (the .docHeader style doesn't kick in due to the lack of the shadow attribute):
Is anyone else experiencing this?
Some additional information:
The LWC resides inside an Aura component parent, lightning:tab, and is conditionally rendered:
<lightning:tab id="6" label="Create Document"> <aura:if isTrue="{!v.isCongatemplatesLoaded}"> <c:interactionCreateDocumentEditor /> ...
LWC and parent aura component have the same code in both sandboxes.
Both sandbox instances are Winter '22 Patch 3.2.
Browser used is Chrome.