Example Description
In this example we demonstrate how we can extend Velo by creating Web Components that are embedded in a Velo site as Custom Elements. In this case we used Stencil as a library for coding the Web Component, but any other Web Component library would work as well.
Stencil is a React-inspired web component library. It uses the same JSX as React and some of the same concepts (Render function, props, state). However, Stencil differs as it compiles to an optimal bundle, creating a Virtual DOM that is consolidated directly into the DOM itself (no VDOM to VDOM comparison).
The result is standard web components with optimal performance.
In addition, Stencil provides a good development experience for building components, websites, apps, and PWAs through their template applications. Stencil also supports server-side rendering and hydrations for websites that need to be optimized for indexing.
How We Built It
We created the Web Component using Stencil. Check out the Web Component source code on github or read our blog post. To use the component in Velo, we took care of the following tasks:
Handle input attributes: We used the @Prop() annotation on the branches member in branches-table to define an attribute that Velo can use.
Post events back to Velo: To post events back to Velo when a user clicks on any of the actions, like the Help link or the Create New Branch link, we used dispatchEvent on the custom element DOM element instance. We got the instance of the DOM element of the custom element using the @Element annotation and posted an event to Velo.
Import the component to Velo and write the code to interact with it: To import the component to Velo, we ran a build and generated the script. Then we copied the generated code from the dist/custom-elements/index.js file to the Velo file: public/custom-elements/branches-table.js. The generated file from Stencil needs 2 additional requirements to use it in Velo: babel polyfill and registration of the custom elements. We got the polyfill from the @babel/polyfill NPM package, which we installed on Velo. Then we create a file to import the polyfill and register the Custom Element.
To finish importing the component to Velo, we added a Custom Element in the Editor from Add > Embed > Custom Element. In the Element Settings, we selected Velo file as the method for adding our script file, the register-branches-table.js file as the script file in Velo, and gave our custom element the branches-table Tag Name.
Finally, we wrote code that interacts with our custom element. We wrote the code on the page where we placed our custom element. In the $w.onReady function (which is called when the Velo page model is ready) we added the code to set attributes and listen to events.
Related Examples
Did this help?
|
Thanks for your feedback!
Chart.js Custom Element
Use custom elements to implement a chart of countries and votes per country.
Advanced
Dropdown Custom Element
Create a dropdown with text and images using a custom element.
Advanced
Alert Messages
Display an alert popup message on the corner of the screen
Advanced