Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

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

1.Create Web Components With X-Tag
2 lessons, 10:34

Free Lesson
1.1
Introduction
00:43

1.2
Create Web Components With X-Tag
09:51