I’ve been on a custom web component kick for the last few months. Why? Let’s go into some background on that…
MSU’s College of Natural Science is currently in the process of migrating from one CMS to another. The reasons for doing so I won’t go into, but the process has revealed the need for some custom functionality that won’t be in the new CMS on Day 1. At this point in time I haven’t had any training on the new CMS, that is actually coming in the next month or two, so creating custom functionality in our new system isn’t even an option for me yet. So, I’ve had to turn to custom web components.
HTML5 is a great tool, but unfortunately it doesn’t provide everything “out of the box” that one may need. For example, I can easily insert an image into HTML using the <img> tag, but can I easily insert a random image? The answer to that is no. Yes, you can write the JavaScript to do it, but if it’s not easily reusable, it’s not really great for a CMS. On top of that, when the content editors of your CMS range from students to faculty to administrative assistants, you’re dealing with people who span the spectrum of technical know-how and ability. Enter custom web components…
Custom web components are certainly nothing new…but they’re relatively new to me. My knowledge of custom web components first came from Angular. No, I’m not proficient in Angular (at least as of this writing), but my minimal exposure to it from a previous position made me aware of what web components were. When I started considering building out custom functionality for our CMS, independent of the CMS itself, the idea of custom web components came to mind. I had never built one myself though…so I did what I normally do when I want to learn something new for the web, I turned to the web itself.
I came across a really great video called ‘Web Components Crash Course‘. If you’re new to web components yourself, I highly recommend checking it out. You don’t need any fancy JS libraries, all you need is HTML, JS and CSS. Between this video and some other online resources, I was able to quickly dive into creating my own. In fact, to save time for future custom components, I went as far as creating a template in VSCode for custom web components, which gets me up and running quickly.
Before I knew it, I had started down the road of creating my own custom components library. My plan is to incorporate these custom components into our CMS theme JavaScript file. By doing so, any of the components I’ve created can ‘easily’ be used on any page within out system. ‘Easily’ is in quotes there, because the components still require a content editor to interact with the source view to copy/paste in custom HTML elements and modify attributes. However, the complexity around each is obscured so that content editors only have to worry about setup and configuration. Sure, it’s not 100% ideal for the content editors, but it allows for functionality beyond what the CMS can provide, while also not tying this functionality to any one system.
Now that I’m on this custom web component kick, I plan on continuing to build out my library. If you’re interested in viewing my custom components, you can demo them here or view my repository here.