Adding Web Component for Ionic Modals
Utilizing Web Components within Hugo Static Site Generator (or any static site). Adding a Custom Element for an Ionic Modal pop-up.
So for this Web Component we are going to code a Custom Element from scratch, not using Stencil, Polymer, or Angular.This just builds a simple search modal that allows for Algolia search searchResults:
Modal Code
I don't know if I can add much more than what Eric Bidelman wrote for Custom Elements. I would just say you can basically put anything in them, just make sure you have the connectedCallback() in place if you need to run code each iteration.
connectedCallback: Called every time the element is inserted into the DOM. Useful for running setup code, such as fetching resources or rendering. Generally, you should try to delay work until this time.
Event Listener for click
This is utilizing Ionic's Modal. Please also not you MUST include the <ion-modal-controller> in your site or this will not work (trust me lost hours of my life on that one)! Notice in modalController.create we are passing a component: 'modal-search' property. This is the name of custom element that we created above.
The BEST Part
Now I could package this up and add it to NPM as a nice package. Better yet we could create it from a Stencil component next.Let me know what you think!
