How to add web components to BackboneJS

Would you like to add web components to your BackboneJS project? If so, this article will be quickly explaining the process for adding web components to your BackboneJS project.

Let’s start with importing your components. This can be done using NPM:

npm install -save your-component

Be aware that some components may be using a different framework which will react with the DOM differently. You may have to import this functionality if needed.

Next, you can create a template container for your component. This will be done inside of a <div> as per the example below:

template: _.template(
"<div>
<div id="your-component></div>
<p class='random-text'>
This is random text for the component!
</p>
</div>"
),

You will then need to unmount your component when Backbone’s remove method is called for the view:

remove() {
ReactDOM.unmountComponentAtNode(this.el);
Backbone.View.prototype.remove.call(this);
}

That’s it, you can now use your component with your BackboneJS project.