When you host your custom elements with Velo, a sample wix-default-custom-element.js file is provided in the Public section of your backend files. You can use this JavaScript file as a basis for coding your own elements.
This article assumes here you know a bit about designing elements with CSS properties in Javascript and working with web components.
You can copy the sample code:
Alternatively, copy the sample code from this article below.
When copying the following code sample for your own use, substitute variable, element, and class names and values as necessary.
1
Because this article assumes you know about designing elements with CSS properties in Javascript and working with web components, we will provide here just a high-level overview of the sample code to get you started. See other MDN resources for more info.
connectedCallback()
lifecycle function to create the style, image, and text on the page when the element can connect to the page.wix-default-custom-element
. Enter this tag name in Settings when adding the custom element to the page in the editor.