Here’s a smart and comprehensive tutorial from Andy Bell on how to create a progressively enhanced narrow-screen navigation solution using a custom element. Andy also uses
Proxy for “enabled” and “open” state management,
ResizeObserver on the custom element’s containing
header for a Container Query like solution, and puts some serious effort into accessible focus management.
innerHTML. This is an interesting approach and solution for getting around web component styling issues. I see elsewhere online that the
innerHTML based approach is frowned upon however Andy doesn’t “throw out” the original markup but instead augments it.