Learn: Web Component Style Flexibility

An interactive, single-file teaching page that demonstrates five strategies for letting the outside world style a shadow-DOM web component — from total encapsulation to none.

▶ Live demo: https://its-hcd.github.io/learn-webcomponent-style-flexibility/

The core question is who can style what, on a spectrum from sealed to wide open:

#	Strategy	Mechanism	Encapsulation
01	Locked	Public --nys-* custom properties (private/public pattern)	Total
02	Themeable	::part() — curated, named internal elements	High
03	Themeable + nested	exportparts — forward a child's part through the parent	High (two boundaries)
04	Slotted	<slot> — consumer content stays in the light DOM	Frame sealed, content open
05	Light DOM	createRenderRoot() returns this — no shadow root	None

Each section has a live working demo, the real source running it (syntax-highlighted on the page), a plain-language explanation, and a rule-by-rule walkthrough of exactly what the consumer stylesheet does to the demo — including the deliberate failing selectors that teach each strategy's precise limit. The whole thing is understandable in the browser, no DevTools required.

Built with

• Lit 3 (loaded via ESM CDN) — components are real LitElement classes with static styles = css\…`andrender()returninghtml`…``, matching production component syntax.
• No build step, no other dependencies. Self-contained syntax highlighting.

Run locally

It's a single file — open index.html in any modern browser, or serve the folder:

python3 -m http.server 8000
# then visit http://localhost:8000/