Ben Frain • 12/12/2023

Using CSS @property inside shadowRoot (web components) workaround

This article details a specific technical challenge encountered when trying to use the CSS @property feature inside a Lit web component's shadowRoot. It explains why @property doesn't work within shadow DOM CSS and provides a concrete workaround using `document.adoptedStyleSheets` to register the custom property globally, enabling animations like a conical-gradient pie timer.

0 comments

#css #web components #shadow dom