Use Third Party Web Components in LWC Salesforce | LWC Stack ☁️⚡️

Kapil December 17, 2023

 In this blog I will show you how you can use Third Party Web Components in LWC Salesforce. 

To use a third-party web component in a Lightning web component, add it to your template using the lwc:external directive. The third-party web component renders as a native web component in your LWC template.


You can use a third-party web component using one of these solutions.

  1. Upload a third-party web component as a static resource. Load the component using the loadScript method from the lightning/platformResourceLoader module. Then, add the custom element to your template using lwc:external. You can upload up to 5 MB per static resource. An org can have up to 250 MB of static resources.
  2. Add a third-party web component as an LWC module with a .js-meta.xml configuration file. A component's JavaScript file can have a maximum file size of 128 KB.


This beta release includes the following known issues.

  1. Only a closed shadow mode is supported for third-party web components using shadow DOM. If the third-party web component uses an open mode, update the source to use closed mode to make the component LWS compliant. Alternatively, work with a third-party web component that doesn't use shadow DOM.
  2. loadScript doesn’t support ECMAScript modules. Only pre-bundled JavaScript files with custom elements in a legacy format such as IIFE (Immediately-Invoked Function Expression) or UMD (Universal Module Definition) are supported.
  3. Third-party web components with npm and other dependencies or those that require compilation and bundling aren't supported. Importing from npm isn’t currently supported.
  4. Third-party web components that reference an element by ID aren't supported in shadow DOM. For example, if the component uses document.getElementById('some-id'), LWC can't access the global HTML document. Use template refs where possible.
  5. Experience Builder sites don't currently support third-party web components when LWS is enabled.

Example 1: Date Component


DateComponent.html

1
2
3
4
5
<template>
    <lightning-card title="Date Component" class="slds-card__body_inner" icon-name="standard:search">
        <jb-date-input label="Enter Date" lwc:external></jb-date-input>
    </lightning-card>
</template>

DateComponent.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { LightningElement } from 'lwc';
import { loadScript } from "lightning/platformResourceLoader";
import jbdateinput from '@salesforce/resourceUrl/jbdateinput';


export default class DateComponent extends LightningElement {
    isCmpInitialized = false;
    renderedCallback() {
        if (this.isCmpInitialized) { 
            return;
        }
        this.isCmpInitialized = true;
        loadScript(this, jbdateinput)
            .then(() => {
                console.log('###Loading');
            })
            .catch((error) => {
                console.log('###Eror');
            });
    }
    
}


Example 2: Time Component


TimeComponent.html

1
2
3
4
5
6
7
<template>
    <lightning-card title="Time Component" class="slds-card__body_inner" icon-name="standard:search">
        <relative-time datetime={date} lwc:external>
  
        </relative-time>
    </lightning-card>
</template>

TimeComponent.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { LightningElement } from 'lwc';
import { loadScript } from "lightning/platformResourceLoader";
import timeElements from '@salesforce/resourceUrl/timeElements';

export default class TimeComponent extends LightningElement {
    isCmpInitialized = false;
    date;
    renderedCallback() {
        if (this.isCmpInitialized) { 
            return;
        }
        this.isCmpInitialized = true;
        loadScript(this, timeElements)
            .then(() => {
                this.initializeComponent();
                console.log('###Loading');
            })
            .catch((error) => {
                console.log('###Error');
            });
    }

    initializeComponent() {
        this.date = new Date();
        console.log("🚀 ~ this.date:", this.date);
    }
}


Output



Checkout Complete Video Tutorial Below


 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Happy Coding :)

Tags:

Post a Comment

0 Comments