See Salesforce use LWC in Aura standard components

Question

"All those standard components you've used, like lightning:button, are actually LWC components..." (sfdcfox, 2018) "Aura is using LWC components in most of the base components behind the scenes" (salesforce-sas, 2019). Remain these Aura-LWC completely different, do they share code or are they sometimes largely the same as the respective standard LWC's?

And can I see this within Chrome? E.g. if the lightning-button I use (not just according to Github) is under the hood somewhat the same as the lightning:button?

Apparently it is possible to see the code of the Aura component with Salesforce's Lightning Inspector. But when I set up a trivial Lightning app, embedded an Aura component in it (with a lightning:button) and embedded a LWC in the Aura (incl. lightning-button), I didn't learn much from it:

I assume I'm supposed to look at the "Component Tree". On the left I see the lightning:button positioned in the Lightning app, but no Javascript. In the sidebar on the right I see two sections of "Attributes" (both referring to the Aura button), no Javascript. There's no shortcut to get to the source in Chrome's "Elements" or "Source" tab. Unfortunately, the "Component Tree" renders my LWC as a single <c:foo> . (Did I read somewhere Lighting Inspector only supports Aura?) Clicking on the <button...> element of the Aura in Chrome's "Elements" view, I can see Attributes and some other information in the "Lightning" sidebar. For the <button...> element of LWC the sidebar remains blank. Am I missing something?

In DevTool's "Sources" view

apparently the Aura button Javascript is under

/top/[scratch org]/components/lightning/button.js

, LWC under

/top/[scratch org]/components/interop/button.js

Not unexpectedly the two files look different. E.g. Aura's button.js has the typical controller/helper structure.

How can I see Aura's LWC action? Has this changed? Can I even see Aura and LWC sharing the same component code sometimes?

Answer 1

The original phrasing comes from this article that was published some time ago (and linked in the question from my previous answer). The relevant quote that would have led myself, salesforce-sas, and others, to believe that this was true was a result of this statement:

Aura components and Lightning web components share the same base Lightning components. Base Lightning components were already implemented as Lightning web components.

However, it seems that the framework still doesn't necessarily have a total rewrite and/or has exceptions, because the button is still rendered as a normal button. To get a better feeling for what's going on, let's take a look at lightning:input.

When we write this code:

<aura:application >
    <lightning:input label="Value" />
</aura:application>

And look at the source, we find this:

<lightning-input
  data-data-rendering-service-uid="1"
  data-aura-rendered-by="3:0"
  class="slds-form-element"
  lightning-input_input-host=""
  ><label
    lightning-input_input=""
    class="slds-form-element__label slds-no-flex"
    for="input-0"
    >Value</label
  >
  <div lightning-input_input="" class="slds-form-element__control slds-grow">
    <input
      lightning-input_input=""
      class="slds-input"
      type="text"
      id="input-0"
    /></div
></lightning-input>

This is useful; we see that instead of an xml namespace (lightning:input), we instead see a custom component (lightning-input).

We can look at that source code for that component, and we'll find:

class LightningInput extends lwc.LightningElement {

Which is the compiled version of what an LWC is expected to look like.

I suspect that lightning:button is still an Aura component because it would otherwise be possible to sneak Aura into a supposedly LWC-only zone (remember, we can't slot Aura components inside LWC components). The interop module allows the button to work correctly with LWC, despite it being an Aura component.

I'm not sure if any other exceptions exist in the lightning:* namespace, but it seems you've just stumbled across an example purely by luck. You should find that most of the lightning:* components actually do render as lightning-* instead, which we'd expect if they were LWCs.