Would you like to add a web component to your EmberJS project? This article will quickly describe how you would be able to add such components to your project.
To start, you will need to import your web component, then define it as a custom element in order to use it in your template.
First, import your component. You can do this by using the below code in the following directory app/initializers/custom-elements/js:
import MyCustomElement from '../../lib/web-components/my-custom-element.js';
export function initialize(application) {
window.customElements.define('my-custom-element',);
}
export default{
initialize
};
You can now use the element in your template as such:
<my-custom-element></my-custom-element>
That is it, you can now use web components with your EmberJS project, you can use them as you would any custom element with EmberJS. Please note that these web components will work on their own, but if you would like them to integrate with your application further, you will need to make more modifications to the code.