Component Support 🧪
Webflow Components are great, but have quite a few limitations that can make them very difficult to work with in more functional setups;
Key Limitations
HTML Embeds within a component cannot +Add Field any content from the component properties.
Custom Attributes on elements within a component can only data-bind to "Attribute" type properties.
These must be created directly from the attribute-binding
No binding to e.g. an Image url, or plain text
Limited property types
No general URL type, for e.g. specifying a video or file download
Plain text can work but does not validate the field
No option-list setups
Attribute content cannot be automatically exposed as e.g. CSS vars or JS vars for use in custom styling code
CMS
Custom Attributes can only bind to a special custom attribute type.
Text element - text property
Rich text element - rich text property
Div - text property
https://www.sygnal.com/lessons/component-data-binding
Conditional Visibility
Leverage the current set of property capabilities
Conceptual
`wfu-if-set` = ( value )
wfu-if-true
= ( truthy value )
wfu-if-hide-method = remove | hide
wfu-switch
wfu-switch-case = x
How Webflow Elements Bind to Component Properties
How Component Properties Bind to CMS Fields
Within a collection list or collection page.
Rethinking Embeds
As of 2025-02-08 Embeds do not support the dynamic integration of data from component properties. However, it's possible to bind a custom attribute to aproperty,
Attribute property
Add a propertyBind it to the
Text property
Add a text property. Bind it to a text element within the component. T
Rich text property
Image property
Add an image property. Bind it to an image element within the component ( can be hidden ). Use script to retrieve it.
Visibility property
Referencing Data
To do this we first want to establish a standard for referencing data simply and flexibly from other elements within the Webflow Component's generated HTML.
There are t
Component n
This technique can also be adjusted to the target the parent element's attribute or immediate siblings.
Here attr
is an example attribute name we want to reference.
Current element attribute
{{#attr}}
Parent element attribute
{{^#attr}}
Prev sibling element attribute
{{<#attr}}
Next sibling element attribute
{{>#attr}}
Current element innerText
Specific named element
{{name.#attr}}
{{name.$}}
{{name.%}}
Theoretically, we'd want to populate attributes first, then embeds, to allow some advanced changing.
Referencing Data from an Attribute
To populate a custom attribute with Property values, we want
To do this we'll leverage SA5's existing spec for Dynamic Attributes.
Under consideration
This technique can also be adjusted to the target the parent element's attribute or immediate siblings.
Here attr
is an example attribute name we want to reference.
Current element attribute
{x:myval=#attr}}
Parent element attribute
{{^#attr}}
Prev sibling element attribute
{{<#attr}}
Next sibling element attribute
{{>#attr}}
Current element innerText
Specific named element
{{name.#attr}}
{{name.$}}
{{name.%}}
Referencing Data from an Embed
This technique can also be adjusted to the target the parent element's attribute or immediate siblings.
Here attr
is an example attribute name we want to reference.
Current element attribute
{{#attr}}
Parent element attribute
{{^#attr}}
Prev sibling element attribute
{{<#attr}}
Next sibling element attribute
{{>#attr}}
Current element innerText
Specific named element
{{name.#attr}}
{{name.$}}
{{name.%}}
Attribute Property
As of 2025-02-08 attribute properties need to be created from the custom attribute binding directly. Select an element, add a custom attribute, and choose the option to bind it to a component property. You will be given an option to create a new one.
Bind the attribute property directly to the Embed element itelf. Any unique attribute name is fine, for example
my-attr
Within the embed, reference it using that attribute name, e.g.;
You can position it anywhere, and use text adjacent to it, for example;
This cosntruction will pull the exact contents of the attribute named hex-color
from the Embed element, and integrate it into the text precisely.
We're using the distinctive {{...}}
construction because Webflow styles these specially in Embeds. For example;
Parent & Sibling Attributes
This technique can also be adjusted to the target the parent element's attribute or immediate siblings.
Current element attribute
{{#my-attr}}
Parent element attribute
{{^#my-attr}}
Prev sibling element attribute
{{<#my-attr}}
Next sibling element attribute
{{>#my-attr}}
Current element innerText
Image Property
Place an image element immediately adjecent to and prior to the Embed
Bind it to your image property
In the embed, target the sibling's source attribute, e.g.
Named
The component itself MUST have an attribute;
This identifies the outer bound of the component cleanly, so that variables can be scoped within it.
Within that
Visibility Property
? Check for element existance
Last updated
Was this helpful?