A CSS Only Tabs Prototype (No JavaScript Required)

Component Kickoff I was listening to an episode of Shop Talk Show that discussed putting native HTML elements inside web components instead of having the component insert them. For example, a fancy-checkbox component could contain a checkbox element: <fancy-checkbox> <label for="checkbox-x">Show Example</label> <input id="checkbox-x" type="checkbox" /> </fancy-checkbox> Or, it could be empty, pushing the responsibility for adding the checkbox element into the component itself. <fancy-checkbox></fancy-checkbox> With the first one, a checkbox shows up even if JavaScript or the web component fails to load. Not so with the second. Modal Pondering The conversation got me wondering what you can do with a checkbox if there's no JavaScript running on the page. Specifically, I was wondering if you could do something like make a dark mode switcher using only HTML and CSS. The answer is, yes, you can. Check this out: Activate Dark Mode: There's no JavaScript involved. Everything happens thanks…