[Cairo Dreamin 2024] 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

2. Thank you, sponsors!
3. Use the power of standard web components in Salesforce Fabien Taillon, CTO at Texeï, Salesforce MVP 12:00 - 12:40 Developer Track Room - Hakim
4. Fabien Taillon • CTO at Texeï • Salesforce MVP - Hall of Fame • Paris Developer Group leader • French Touch Dreamin team • Serial speaker https://x.com/FabienTaillon https://www.linkedin.com/in/fabientaillon https://trailblazer.me/id/fabien
5. Agenda What is the promise of Web Components Who are using them/where to find them Use them on Salesforce
6. 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
7. What is the promise of Web Components
8. What is the promise of Web Components
9. What is the promise of Web Components video element is made of several elements, buttons, div etc
10. 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
11. 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
12. 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…)
13. Who is using Web Components Almost everyone actually
14. Who is using Web Components Almost everyone actually
15. Where to find Web Components • Some websites list Web Components: ◦ https://www.webcomponents.org
16. 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
17. How to use Web Components Obviously using these components as is with their native framework would be a nightmare to integrate ≠ ≠ ≠ ≠ ≠
18. How to use Web Components They just don’t talk to each other natively
19. How to use Web Components Web Components to the rescue !
20. DEMO
21. 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) https://help.salesforce.com/s/articleView?id=release-notes.rn_lwc_external.ht m&release=246&type=5
22. DEMO
23. Limitations • Size • Common Salesforce limitations (can’t load external JS) • Lightning Web Security: changing shadow root's mode from 'open' to 'closed' ◦ shadowRoot will be undefined Doesn’t work: Does work:
24. 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
25. Q&A
26. Thank you!