ShadyCSS is a polyfill for approximating Shadow DOM CSS scoping when native encapsulation is unavailable. It rewrites template markup and CSS with unique selectors, helping prevent component styles from leaking into the surrounding application. Unlike many drop-in polyfills, it requires developers to structure markup and styles in templates and accommodate its workflow. section 10.3 section 12.1
Using ShadyCSS involves several compatibility decisions:
- Place component markup and CSS in a <template> so the polyfill can rewrite them. section 12.1
- Avoid relying on :host when native Shadow DOM is absent; select the component element instead. section 12.1
- Prefer classes over IDs for internal elements, because document-wide ID references can collide without Shadow DOM. section 12.1
- Treat the polyfill as an option rather than a complete substitute: it rewrites selectors but does not provide native protection from outside CSS. section 12.1
Switching selectors for a slider
A component can render CSS according to its environment. With Shadow DOM, use :host; without it, use the component name: :host { ... } becomes wcia-slider { ... }, and :host .thumb becomes wcia-slider .thumb. A render function can choose the selector form while using the same HTML template.
