Refactor site search to use custom element

[paulrobertlloyd]

The JavaScript for the site search is a bit of a relic, so updated so that:

• Uses Class
• Uses Fetch API over XMLHttpRequest
• Uses a custom element
• No longer uses ‘mustard cut’ feature detection, as loaded as a module

[frankieroberto]

@paulrobertlloyd i know this has been merged now, but did you consider using the new <search> element rather than a custom one? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/search

[paulrobertlloyd]

The search element serves a different purpose, but you’re right that it should be included. I’ll use it as a wrapper inside the custom element should it serve as a search element and not a link to the sitemap.

Custom elements are sooooo brilliant, though. I’m 1000% sold on them, and have basically added them to everything. 😎

[frankieroberto]

@paulrobertlloyd I must admit I’ve not looked into them properly yet. Instinctively I shudder at the memory of the bad old days of browser wars and proprietary tags, but maybe the JavaScript API makes these more sensible.

[paulrobertlloyd]

It’s basically DOMContentLoaded but leaning on browser smarts for when to load (and unload) enhancements, and provide an easy way to provide fallback content.

Like all tools, custom elements can be used for good or evil, but the current interest in what are being dubbed ‘HTML Web Components’ means that they basically make progressive enhancement an attractive proposition. This is a good place to get started: https://gomakethings.com/the-elevator-pitch-for-web-components/

[paulrobertlloyd]

(Meanwhile, I’ve broken the site at 11:30pm… 🙄)