# 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 ## 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. | Target Element | Attribute | InnerText | InnerHTML | | ------------------------------ | -------------------------------------------------------------- | ------------ | ------------ | | | 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.%}}` | | | | | | {% hint style="info" %} Theoretically, we'd want to populate attributes first, then embeds, to allow some advanced changing. {% endhint %} ## 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 ``` x:attr:= xx:attr= x::attr= ``` ``` x:attr = {{#attr}} ``` This technique can also be adjusted to the target the parent element's attribute or immediate siblings. | Target Element | Attribute | InnerText | InnerHTML | | ------------------------------ | -------------------------------------------------------------- | ------------ | ------------ | | | 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. | Target Element | Attribute | InnerText | InnerHTML | | ------------------------------ | -------------------------------------------------------------- | ------------ | ------------ | | | 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 {% hint style="info" %} 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. {% endhint %} 1. Bind the attribute property directly to the Embed element itelf. Any unique attribute name is fine, for example `my-attr` 2. Within the embed, reference it using that attribute name, e.g.; ``` {{#my-attr}} ``` You can position it anywhere, and use text adjacent to it, for example; ```html ``` This cosntruction will pull the exact contents of the attribute named `hex-color` from the Embed element, and integrate it into the text precisely. {% hint style="info" %} We're using the distinctive `{{...}}` construction because Webflow styles these specially in Embeds. For example; {% endhint %}
### Parent & Sibling Attributes This technique can also be adjusted to the target the parent element's attribute or immediate siblings. | Target Element | Attribute | InnerText | InnerHTML | | ------------------------------ | --------------- | --------- | --------- | | 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 1. Place an image element immediately adjecent to and prior to the Embed 2. Bind it to your image property 3. In the embed, target the sibling's source attribute, e.g. ```html Open this image in a new tab ``` ## 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. ``` wfu-component-name="foo" ``` Within that ```