Adding dynamic features to a static site.

This is a multi part series covering all the different types of Web Components I am using on the https://ajonp.com site currently. I just wanted to show how you can use each of them at a somewhat high level.

Adding Web Component for Ionic Modals

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.