Links

SA5 Dynamic Attributes

Create any custom attribute, even if it's reserved by Webflow

Overview

Webflow's custom attributes feature is much more powerful with the new CMS binding capability- but many important attribute names are reserved to protect unwary web designers from themselves.
In certain cases, the ability to set these attributes is crucial.
SA's Dynamic Attributes feature overcomes this by allowing you to create proxy attributes that are then applied to the page once the page has loaded.
Webflow's ECommerce Products and Categories do not support Webflow's CMS bound custom attributes. See the Future subpage here for some work we're doing on that.

Reserved Attribute Names

If you've never encountered it, this is what happens in Webflow when you attempt to use a reserved attribute name.
Here's a partial list of reserved attribute names, as documented by samliew;
abbr, accept, action, align, alt, autofocus, autoplay, bgcolor, border, char, charoff, charset, cite, class, cols, colspan, content, controls, coords, crossorigin, datetime, default, disabled, download, for, form, formaction, formenctype, formmethod, formnovalidate, formtarget, frame, group, headers, height, high, href, hspace, icon, id, ismap, kind, label, list, loop, low, manifest, media, method, multiple, muted, name, optimum, placeholder, poster, preload, radiogroup, readonly, required, reversed, rows, rowspan, sandbox, scheme, scope, scoped, scrolling, seamless, selected, shape, size, sizes, src, srcdoc, srclang, style, type, value, vspace, width, wrap, xmlns, onblur, onclick, ondblclick, ondrag, ondrop, onerror, onfocus, onfocusin, onfocusout, onhelp, oninput, onkeydown, onkeypress, onkeyup, onload, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpaste, onredo, onscroll, onsubmit, onundo

Use Cases

This is a more technical feature, but it has an incredible range of uses. Here are a few;
  • Use x-value = ( your value ) to initialize an INPUT element from a CMS collection item.
    • Note, doing this on a Textarea element will initialize it as well, even though the content is bound from inner text.
  • Use x-type = date on an INPUT element to change it to a date type

Usage Notes

x-* attributes

Place on any Collection List directly ( not the Collection List Wrapper ). No value is needed.
Any attribute prefixed with x- will be processed into the same attribute-value, without the prefix.
e.g. x-value = foo will be applied as value = foo
When you use this feature with Webflow's CMS-bound attributes, you can initialize the input field's value from any CMS field you choose.

Getting Started ( NOCODE )

STEP 1 - Add the Library

First, add the library as detailed in Quick Start.

STEP 2 - Apply x- prefixed custom attributes to any elements

See above for details.

Resources

Last modified 2mo ago