Editor X: Adding a Custom Element to Your Site
4 min read
Editor X is transitioning to Wix Studio, our new platform for agencies and freelancers.Learn more about Wix Studio
Enhance your site with your own design features and CSS capabilities using Custom Elements. You can add any Javascript component by linking a custom element to a server URL or a Velo file. If needed, you can set more attributes directly from Editor X.
Learn more about:
Before you begin:
Make sure your site has a Premium Plan and a connected domain with no Editor X ads. Learn More
What are Custom Elements?
Custom elements let you use your own HTML tags on your Editor X site. These elements work across all supported browsers, and can be used with any JavaScript ES6 library or framework that works with HTML 5.
Examples of useful custom elements
Code requirements
Tips:
- You can use custom elements from third-party sources, just make sure to update the Tag Name in Properties when adding the custom element to your page.
- The performance of your custom element depends on its implementation.
Adding and Setting Up the Custom Element
Add as many custom elements as you need to your site. After dragging a custom element to your page, define its source (server URL or a Velo file) and give it a tag name to appear in the page registry.
Show me how
at the top of Editor X.Use the Inspector panel 
to ensure your custom element looks great in all breakpoints – you can adjust its sizing, docking, alignment and more.
to ensure your custom element looks great in all breakpoints – you can adjust its sizing, docking, alignment and more. Note:
By default, custom elements appear in your page's customElements registry. The tag name you enter for your custom element defines its name in this registry.
Setting the Custom Element's Attributes
Make further adjustments to your element's properties and behavior by setting HTML attributes. The Element Attributes panel lets you add, edit and remove attributes directly from Editor X, so you don't have to access the actual code.
Show me how
Important:
The code for your custom element must acknowledge and handle the defined attributes. Otherwise, they won't function properly.
Custom Element Example
Below is an example of adding a basic custom element to your site. The instructions explain how to add "Hello World" text to your site.
First, you need to create and code the element and its behavior in a JavaScript file.
Show me how
Next, define the custom element class.
In this example, we defined it as HelloWorld and we'll use the same name when registering the custom element. The connectedCallback() function below is a lifecycle callback function that's triggered automatically when the element is attached to DOM.
1class HelloWorld extends HTMLElement {
2 connectedCallback() {
3 this.innerHTML = '<br/><br/><br/>Hello World!';
4 }
5}
6customElements.define('hello-world', HelloWorld);After defining the custom element class, we register it with the
customElements.define(name, class) method. When adding the custom element to your site, enter the registered name as the Tag Name. Once registered, the custom element can be used on your site.
1CustomElementRegistry.define('hello-world', HelloWorld);Looking for more advanced information?
Click here to learn how to use this element with Velo by Wix.
Did this help?
|