This library allows you to dynamically apply custom attributes to HTML elements.
This is most valuable within a Webflow Collection List, where the attributes are changing and unknown in advance.
Attributes are applied in WFU’s post-processing script, executed immediately after the page loads.
WFU has no restrictions on what custom attributes you can add, or which elements you can add them to. This means that Webflow’s reserved fields are not a barrier here.
DEMO - Dynamic Attributes
Dynamic attributes are not natively visible. View source in order to see the dynamic attributes in the HTML of this demo page.
For demonstration purposes, I’ve applied the attributes as
style attributes, which apply a visible background color.
- None identified.
Getting Started ( NOCODE )
STEP 1 - Add the Library
There are currently no configuration options for this library, so we’ll use a no-code integration approach.
Add this CSS script to the HEAD of your site or page.
<link rel="stylesheet" href="https://firstname.lastname@example.org/dist/css/webflow-html.css">
Add this JS reference to the BODY of your site or page.
<script type="module" src="https://email@example.com/src/nocode/webflow-html.js"></script>
STEP 2 -Add an HTML Embed with your custom Attributes
Put an HTML Embed right after, or right inside of the element you wish to affect.
Paste in the following code.
<data wfu-attr="style" wfu-attr-target="prev" wfu-attr-val="background-color: yellow;" ></data>
wfu-attrindicates the name of the attribute you want to add
wfu-attr-targetidentifies the element you want to apply it to, one of;
previndicates the prior sibling.
nextindicates the following sibling.
parentindicates the containing element.
wfu-attr-valis the value you want applied. Use Webflow’s CMS field embed for this, for dynamic values.
NOTE: Any existing attribute will be overwritten.
- Yes you can put multiple attributes in the same embed, and even target them differently
May allow value modification;
- Prepend, append
- Regex transforms
May allow advanced targeting;
- jQuery or CSS selectors