How to read attributes in LWC when using $Lightning.createComponent

Question

I am trying to pass the recordId as an attribute to a lightning web component used in a visual force page. However, I am struggling to find how I read the attributes set in the $Lightning.createComponent, nothing seems to get passed through to the constructor.

The documentation around this seems to be non-existent, I guess this is something they don't want you to do, but unfortunately I need to.

Any help much appreciated.

The code in the vfp is

    $Lightning.use('c:CRLightningWrapper', function() {
        $Lightning.createComponent(
            'c:collectionsContainer',
            {
                recordId: "{!$CurrentPage.parameters.id}"
            },
            'collectionsContainer',
            function(cmp) {
                console.log('component created {!$CurrentPage.parameters.id}');
        });
    });

I am following the documentation and implement in the lwc like below:

import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';

export default class Record extends LightningElement {
    @api recordId;

    @wire(getRecord, { recordId: '$recordId', fields: ['Account.Name'] })
    record;
}

Answer 1

This actually is documented, it is just very well hidden: https://developer.salesforce.com/docs/component-library/documentation/lwc/data_get_user_input

To summarise, in your Lightning Web Component you need to make sure you import api and expose the recordId property:

import { LightningElement, api } from 'lwc';
export default class MyComponent extends LightningElement{
    // Expose a recordId property.
    @api recordId;
}

Additionally, change the following line in your VisualForce Page:

recordId: "{!$CurrentPage.parameters.id}"

to

record-id: "{!$CurrentPage.parameters.id}"

Answer 2

caveat:Considering the org you are using is not Summer '19 preview

After seeing the post I got curious and tested couple of things,

Testing by passing string: I am passing the $CurrentPage.parameters.id to String attribute in Aura Component and passed that to Lightning web component public property accountId and the value is getting passed.Check the code below:

VF Page

    <apex:page standardcontroller="Account" standardStylesheets="false" showHeader="false" applyHtmlTag="false">
    <apex:includeLightning />
    <div id="lightning" class="slds"></div>
    <script type="text/javascript">
      $Lightning.use("c:lwcapp", function() {
           $Lightning.createComponent(
                  "c:accountIdtolwccmp",
                       {
                        accountId: "{!$CurrentPage.parameters.id}"
                       },
                  "lightning",
                 function(cmp) {
                 console.log('component created');
               });
             });
       </script>
      </apex:page>

accountIdtolwccmp

     <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
     <aura:attribute name="accountId" type="String" />
     <lightning:card title="Account Id Section in Aura" iconName="custom:custom14">
         Account Id in Aura:{!v.accountId} 
     </lightning:card>
     <c:passaccountidtolwc accountId="{!v.accountId}"/>
     </aura:component>

passaccountidtolwc

      <template>
       <lightning-card title="Account Id Section in LWC" icon-name="custom:custom14">
         <div class="slds-card__body slds-card__body_inner">
            AccountIdinLWC:{accountId}</br>
         </div>
       </lightning-card>
       </template>

       import { LightningElement,api} from 'lwc';
        export default class Lwcrec extends LightningElement {
           @api accountId;
        }

Testing lightning/ui*Api Wire Adapter with recordId and string accountId property: If I pass the recordId to the ui*Api getrecord Adapter it failed to return any value.But If I pass the accountId which I pass from aura component to the adapter it return the account values.check the below code:

Template

        <template>
        <lightning-card title="Account Id Section in LWC" icon-name="custom:custom14">
          <div class="slds-card__body slds-card__body_inner">
          AccountIdinLWC:{accountId}</br>
          AccountNamebasedonuiApiAdaptor:{name}
        </div>
        </lightning-card>
        </template>

JS

   import { LightningElement,api,wire,track} from 'lwc';
   import { getRecord } from 'lightning/uiRecordApi';
   export default class Lwcrec extends LightningElement {
   @api accountId;
   @api recordId;
   @track record;
   @track name;
   @wire(getRecord, { recordId: '$accountId', fields: ['Account.Name'] })
   wiredRec({ error, data }) {
     if (data) {
         this.record = data;
         console.log('record---'+JSON.stringify(this.record));
         console.log(this.record.fields.Name.value);
         this.name=this.record.fields.Name.value;
         this.error = undefined;
      } else if (error) {
         this.error = error;
         this.record = undefined;
          }
        }
     }

Conclusion

Either you can wait for the feature Use Lightning Web Components in Visual force Pages in Summer 19.Or you can try passing the String from the Visual force page use it in the ui*Api getrecord Adapter.