As of Apr 2026, Webflow's components do not yet support;
- Binding styles to component properties
- Binding custom styles to component properties
- Embedding component properties within Embed element content
One of the core use cases for this type of functionality is styling.
Example
Suppose you want a simple little Chip like this. Each Chip is a component, with two properties;
- Text
- Color, which is applied to the SVG dot
Historically, you'd need to;
- Bind the value from the Color prop to an attribute
- Run JS that finds that attribute, and re-applies it as a variable in style
It's messy, it's complex, it generally has FOUC ( flash of unstyled content ) issues since the JS runs at the end of the page.
CSS attr() a better way
Most browsers [ not all, see below! ] support CSS attr() which allows you to;
- Retrieve CSS values from element attributes
- Default to a fallback value if the value does not exist, or if attr() is unsupported
It looks like this;
Here's an example, retrieving a "color" attribute, converting it to a CSS color value type, and defaulting to specific variable values otherwise.
attr(color type(<color>), var(--chip-dot, var(--accent)))We can use this directly in CSS or in Webflow custom styles to
How to Use This in Components
When you want to pass Component property information into CSS for styling purposes, there are 3 steps;
1 - Create your Property as a Text prop
2 - Bind it to an Attribute on relevant Element
Typically the element you are affecting, but you can use CSS selectors to control this in significant detail.
3 - Use the attr() CSS in your design
- Webflow custom styles, seen bottom right in this screenshot
- Or, a custom Embed with a
