Web Components cookbook

Copy-pasted markup again, and a CSS tweak on the page next door breaks it without anyone touching my code.

My component's shadow root hides its markup from the page CSS, so the app can't set its own brand colors on it either.

The custom properties I exposed cover color and spacing. Now the design team wants to reshape one internal element's border and layout too, and no selector reaches that deep.

Checked attribute, checked property, wired to update each other, and now the tab freezes the instant someone clicks the checkbox.

A teammate's framework sets my element's property the instant it renders, before my own class definition has even finished loading, and the value just disappears.

How do you test a custom element without every assertion reaching straight into shadowRoot to grab a value?

React hands my custom element an array, and the browser shows it back as the literal text object Object instead of the real data.

Three different apps in our company each reimplemented the same button and modal, and now all three look and act slightly differently.

My design-system input looks perfect. Submit the form, and its value is nowhere in the request.

Clicking the label next to my custom text field does nothing, and calling .focus() on the element from code doesn't do anything either.

Every page load flashes unstyled for a split second before the shadow root finishes attaching.

I extended HTMLButtonElement so my fancy button would keep the native button's keyboard and form behavior for free, and it silently does nothing once that same page loads in Safari.