Custom Elements with ionic

Hi All,

I have configured custom element (native- not angular/ionic component with shadow root), but ionic elements ( for example icons/ ion-spinner) , does not recognized inside me custom element.
On chrome devTools, when debugging I can see the elements with his shadow root, there are not any errors, but the ionic elements just not there.

Thanks,
Sivan

If you’re using lazy loading, make sure you import IonicModule in your component’s module.

1 Like

I do importing the IonicModule in my component’s module, but it is still not working.

More important details:
My custom elements is configured in a java script file located on assets folder. This file is included on my index.html file. When using this custom element tag inside my component html-> the ionic elements does not recognized, when placing the ionic elements inside the component html directly (not inside the custom element) , it is working.

This sounds like a very problematic idea. Why can’t you make it a normal first-order citizen like other Ionic/Angular components?

I need to be able to wrap some other code that might be written in other framework/languages in order it to be more generic. Is this something that possible ?

I think mixing multiple frameworks in a single app is a recipe for pain, and it seems that what you’re going through might be evidence of that.

1 Like

I understand. But my app is some of development environment, so I need to be able to get other components/code written in other languages and just to wrap them with my custom elements.

Maybe it is not the best/right way, but it could be possible in some way?

If you’re talking about JavaScript and html, I did a video a while back which shows you how to interact with some html, for completely different reasons, just a simple rich text editor.

Should give you pointers, in particular if you look at the git repo.

Thanks.
But it is written as ionic/angular component.
My custom element is written in native way and not as ionic/angular component , also located on external js file that included on the html file.

Are you in a position to share said component?

Not really. But In general my custom element is very basic:
The script is located on assets folder and include in index.html

class SpinnerWC extends HTMLElement {

constructor() {
super();

this.shadow = this.createShadowRoot();

}

static get observedAttributes() {
return [ ‘spinner’ ];
}

connectedCallback() {
var template = <ion-spinner></ion-spinner>;

this.shadow.innerHTML = template;

}

attributeChangedCallback(name, oldValue, newValue) {
switch(name){
case spinner’:
}
}
} // end class

window.customElements.define(‘twx-spinner-wc’, SpinnerWC);

and I just added this tag in hello-ionic.html (the basic project structure from ionic cli):





Hello Ionic

HI

I also configured app.module.ts:
added
import { CUSTOM_ELEMENTS_SCHEMA } from ‘@angular/core’;
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]

Thanks,
hope it would help