Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Thank you, sponsors!

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

What is the promise of Web Components

Slide 8

Slide 8 text

What is the promise of Web Components

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Who is using Web Components Almost everyone actually

Slide 14

Slide 14 text

Who is using Web Components Almost everyone actually

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

How to use Web Components Web Components to the rescue !

Slide 20

Slide 20 text

DEMO

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

DEMO

Slide 23

Slide 23 text

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:

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Q&A

Slide 26

Slide 26 text

Thank you!