web-component(6/0)
Prefer Light DOM to Shadow DOM
While there are legitimate uses for Shadow DOM, light DOM ought to be preferred until it is absolutely necessary to place your component’s element tree outside the main document. One common use-case which does not require shadow DOM is a custom element that does something special with events. Light DOM Use-Case Let’s say you have a custom element called <chaos-filter>. It has a form with a <select> dropdown and a filter <button> which applies the selected option to a list of children.…
Inject web component dependencies
If you’re transitioning from a framework like Angular to native web components it feel natural to inject services into your components. When you discover it’s not possible via the constructor, you may give up and use a framework after all. Or you might engineer your own dependency injection decorators. But there’s another lightweight option. Let me show you. ℹ️ These instructions are perfect for small, private use-cases. If you're building dozens of services with interlocking dependencies, there's no decent option besides a framework.…
Build web components for forms
Forms are an obvious web component, but there are a few gotchas. Stephen solves a common problem when writing my own web components: How to communicate with a form tag. I’m curious to try his approach for myself. I recently took a different approach: don’t use the shadow DOM at all. Then the browser has no trouble connecting the input tags with the form. See my chaos-filter, which is used on this page.…
Publish npm package to local repository
I wanted to share a set of authentication web components from chaos-auth so I could use them in my website’s static build. Keeping these components close to the authentication server lets me keep the responsibilities close, since these components will be heavily tied to my authentication implementation. Step 1: Publish Locally To publish a package you’ll simply need a name and version value in your package.json file. Here’s a paired-down example:…
Embed web components into static HTML
I’ve successfully published hundreds of articles using only a static site generator. Sometimes though, I itch to create reactive elements like I build at work with Angular. What is a developer to do? My needs are tiny, so here is a tiny way to get started. ℹ️ My intended goal is to supply a small number of custom web components for most pages on my website that I can inject via Hugo shortcodes.…
Custom container queries with resize observer
Until CSS container queries are baked into every browser, ResizeObserver fills the gap. Here’s an example of an observer that switches the CSS Flex from row to column based on the container’s width. This is used on my Plants and Stones pages. ℹ️ I use a Store object to share observable state across my application. This vastly simplifies communication between components; in this case, with my filter component. When my filter results change, I want to re-calculate the possible list width.…