[London's Calling 2025] Use the Power of Standard Web Components in Salesforce

Did you know that beside Lightning web components, you can find standard web components libraries over the web? Giving you pre built components that may not be available as existing LWC? And that Salesforce recently opened the door to let you use these standard web components directly into Salesforce? Let’s have a look at what web components are, how to use them, and what are the good and bad use cases for them inside Salesforce.

Transcript

1. #LDNsCall #LC25 Use the Power of Standard Web Components in Salesforce Fabien Taillon Partner & CTO, Texeï
2. Who am I Fabien Taillon - Partner & CTO at Texeï - Salesforce MVP - Hall of Fame - Paris Developer Group leader - French Touch Dreamin team @FabienTaillon https://www.fabientaillon.com https://www.texei.com
3. • What is the promise of Web Components • Who are using them • Where to find them • How to use them on Salesforce Agenda @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
4. What is the promise of Web Components “Web Component is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps”. MDN - https://developer.mozilla.org/en-US/docs/Web/API/Web_components @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
5. What is the promise of Web Components @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
6. What is the promise of Web Components @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
7. What is the promise of Web Components <video> element is made of several elements, buttons, div etc @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
8. What is the promise of Web Components <video> element is made of several elements, buttons, div etc But you don’t care about the implementation. You just use it with one easy line of HTML @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
9. What is the promise of Web Components The promise of Web Components is to bring the same ease of use to any custom code/component @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
10. What is the promise of Web Components The promise of Web Components is to bring the same ease of use to any custom code/component • standard • reusable • Encapsulated ◦ external CSS won’t impact the design of your component, ie. your component will always look the same wherever it’s used • Customizable via APIs ◦ exposed and documented Properties, Methods, CSS Custom Properties… @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
11. Who is using Web Components Almost everyone actually @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
12. Who is using Web Components Almost everyone actually @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
13. Where to find Web Components Some websites list Web Components: • https://www.webcomponents.org Some libraries used with a specific framework can be compiled to Web Components • https://github.com/material-components/material-web • https://github.com/microsoft/vscode-webview-ui-toolkit • https://github.com/salesforce/lwc • … SLDS @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
14. How to use Web Components Obviously using these components as is with their native framework would be a nightmare to integrate ≠ ≠ ≠ ≠ ≠ @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
15. How to use Web Components They just don’t talk to each other natively @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
16. How to use Web Components Web Components to the rescue ! @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
17. DEMO
18. How to use it in Salesforce 2 ways to use a standard Web Component in Salesforce: • Upload a third-party web component as a static resource. Load the component using the loadScript method from the lightning/platformResourceLoader module (5 MB per static resource) • Add a third-party web component as an LWC module with a .js-meta.xml configuration file (maximum file size of 128 KB ← moved to 1 MB in Winter ‘25) https://developer.salesforce.com/docs/platform/lwc/guide/create-use-third-party-components.html @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
19. DEMO
20. Limitations • Beta • Size • Common Salesforce Security limitations (LWS) • Basically same state as using 3rd Party JS libraries, some will work, some won’t • Lightning Web Security: changing shadow root's mode from 'open' to 'closed' ← “Fixed” in Summer ‘24 @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
21. Resources Use standard Web Components inside Salesforce https://github.com/FabienTaillon/standard-web-component-in-salesforce Build standard Web Components for use in Salesforce https://github.com/FabienTaillon/bundle-standard-web-component-for-salesforce Standard Web Components in basic HTML Page https://github.com/FabienTaillon/standard-web-components @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
22. #LDNsCall #LC25 Q&A First Name Last Name Contact Details More Contact Details
23. #LDNsCall #LC25 Thank You First Name Last Name Contact Details More Contact Details