can display a Custom Element with no children. While X-Tag makes it easy to leverage all the Web Components APIs (Custom Elements, Shadow DOM, Templates, and HTML Imports), it only requires Custom Elements API support to operate. For Vue.js, a small library exists to declare Vue.js components as Custom Elements. They let you create reusable DOM Elements that can be easily shared between web applications. customElements.define('expanding-list', ExpandingList, { extends: "ul" }); Using the built-in element in a web document also looks somewhat different: . You can either use Babel 7 or the babel-plugin-transform-builtin-classes for Babel 6, and target ES2015 in TypeScript instead of legacy. Create your own Custom Elements and Web Components or use our UI Toolkit built with Smart. Inside the constructor, we define all the functionality the element will have when an instance of it is instantiated. How do we pass the value to our Component? This is what makes it a customized built-in, rather than an autonomous element. Guidelines for Creating Custom Elements. This article introduces the use of the Custom Elements API. Next, we register the element using the define() method as before, except that this time it also includes an options object that details what element our custom element inherits from: Using the built-in element in a web document also looks somewhat different: You use a