Web component

This sample demonstrates how to write a Web component and include it in a custom Experience Builder widget.

How to use the sample

Clone the sample repo and copy this widget's folder (within widgets) to the client/your-extensions/widgets folder of your Experience Builder installation.

How it works

A Web component is defined in my-component.js. This is a JavaScript file - not a TypeScript file - because Experience Builder is compiling the .ts files to ES5, but Web components work on >= ES6 only. The first line uses the ECMAScript 2015 class syntax to create a new Class that extends from HTMLElement.

class MyComponent extends HTMLElement {

In the constructor, a shadow DOM is attached to the custom element using this.attachShadow({mode: 'open'}). Setting the mode to open means that elements of the shadow root are accessible from JavaScript outside the root.

Finally, register the Class using window.customElements.define('my-component', MyComponent). This allows the custom component to be used by name (my-component in this case) on the page.

In widget.tsx, to use the custom component that was defined above, simply import it (import './my-component') and then use it in the JSX in either the render function (if using Class-style widgets) or in the return value if using functional component style. In this case, we are using the functional component style by exporting a function instead of a Class:

export default function Widget(props: AllWidgetProps<{}>){

More information on functional components can be found here.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.