1

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 1: enter image description here

Sandbox 2 (the .docHeader style doesn't kick in due to the lack of the shadow attribute): enter image description here

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.

2
  • 1
    This shouldn't happen, obviously, but I'm not sure we can debug this situation with the limited amount of data in this question. Are you able to reproduce this with a Short, Self Contained, Correct (Compilable), Example by chance? That would give us the best chance of helping you diagnose this problem.
    – sfdcfox
    Aug 30, 2021 at 10:53
  • Thanks @sfdcfox. As I was preparing an example as you suggested I realized that the extra attributes only get rendered if the lwc bundle has a css file. Sure enough the css file was actually missing in the second sandbox (but was oddly present in our git branch). Not sure what happened in our automated deployment but recommitting the css file by adding a space in git fixed it.
    – unhinged
    Sep 1, 2021 at 6:37

1 Answer 1

1

So the extra attributes don't get added unless there's a css file (and it's not empty) in the lwc bundle. There was just an issue in the deployment to the second sandbox and the css file disappeared.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .