No content

Thank you, sponsors!

Use the power of standard web components in Salesforce Fabien Taillon, CTO at Texeï, Salesforce MVP 12:00 - 12:40 Developer Track Room - Hakim

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

Agenda What is the promise of Web Components Who are using them/where to find them Use them on Salesforce

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

What is the promise of Web Components

What is the promise of Web Components

What is the promise of Web Components video element is made of several elements, buttons, div etc

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

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

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…)

Who is using Web Components Almost everyone actually

Who is using Web Components Almost everyone actually

Where to find Web Components ● Some websites list Web Components: ○ https://www.webcomponents.org

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

How to use Web Components Obviously using these components as is with their native framework would be a nightmare to integrate ≠ ≠ ≠ ≠ ≠

How to use Web Components They just don’t talk to each other natively

How to use Web Components Web Components to the rescue !

DEMO

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

DEMO

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:

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

Q&A

Thank you!