DocsCookbookCommunityGitHub →
← Back to recipes list...

Basic component example

This code example demonstrates how to create a custom web component using Symbiote.js. The code imports the BaseComponent class from the '@symbiotejs/symbiote' module.

The MyComponent class extends the BaseComponent class and defines an init$ object to initialize the component's state. The init$ object contains two properties: count and increment. The count property is initialized to 0, and the increment property is a function that increments the count property when called.

The MyComponent class also sets the component's HTML template using the static template property. The template uses the {{...}} syntax to bind the value of the count property to an h2 element and the set attribute for the increment function as the click event handler for a button element.

Finally, the reg method is called to register the component with the name 'my-component', which can be used in the HTML markup of the web page to instantiate the component.

Overall, this code example demonstrates how to create a custom web component with Symbiote.js by defining its state and HTML template, and registering it as a custom element.