1.2 Create Web Components With X-Tag

In this lesson we'll use X-Tag to build a simple custom element. I'll show you how to make use of lifecycle events for your component, how to work with attributes, how to add methods, and how to handle events using X-Tag's simple API.

Code Snippet

content: function () {
    /*
         
            <h1>Expander Heading</h1>
         
        <div class="expandable">
            <p>Expander content</p>
        </div>
    */
},

The content for the custom element can be provided using the content property of the prototype object. In this case we use the multiline comment format to specify the markup to be injected into the component.

Related Links

• X-Tag