Upgrade to Pro — share decks privately, control downloads, hide ads and more …

[London's Calling 2025] Use the Power of Standa...

[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.

Avatar for Fabien Taillon

Fabien Taillon

June 06, 2025
Tweet

More Decks by Fabien Taillon

Other Decks in Programming

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 <video> element is

    made of several elements, buttons, div etc @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
  6. 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
  7. 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
  8. 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
  9. Who is using Web Components Almost everyone actually @FabienTaillon -

    https://www.fabientaillon.com - https://www.texei.com
  10. Who is using Web Components Almost everyone actually @FabienTaillon -

    https://www.fabientaillon.com - https://www.texei.com
  11. 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
  12. 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
  13. How to use Web Components They just don’t talk to

    each other natively @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
  14. How to use Web Components Web Components to the rescue

    ! @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
  15. 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
  16. 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
  17. 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