{"type":"video","version":"1.0","html":"<iframe src=\"https://www.loom.com/embed/5e3e206f46a0489f80892a5c0c491bad\" frameborder=\"0\" width=\"1920\" height=\"1440\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>","height":1440,"width":1920,"provider_name":"Loom","provider_url":"https://www.loom.com","thumbnail_height":1440,"thumbnail_width":1920,"thumbnail_url":"https://cdn.loom.com/sessions/thumbnails/5e3e206f46a0489f80892a5c0c491bad-a9a19d8a1aa4b06c.gif","duration":457.1021,"title":"Advanced Control of CSS Variables with JavaScript","description":"In this video, I explore my favorite approach for applying specific styles to components using a custom JavaScript solution, which allows for precise control over attributes like heading color. I explain the convention I've established for identifying these special variable override properties, emphasizing the importance of using double underscores to ensure proper rendering. While this method introduces a slight delay and requires a reverse proxy for optimal performance, it significantly enhances versatility. I demonstrate how changes to the heading color are applied without affecting the body, showcasing the effectiveness of this approach. Please take a moment to review the HTML output after rendering to see how the styles are generated."}