Custom Elements with ionic


#1

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


#2

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


#3

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


#4

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.


#5

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


#6

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 ?


#7

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.


#8

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?


#9

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.


#10

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.


#11

Are you in a position to share said component?


#12

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