Comment on page
SA5 Dynamic Attributes
Create any custom attribute, even if it's reserved by Webflow
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.
If you've never encountered it, this is what happens in Webflow when you attempt to use a reserved attribute name.
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
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=dateon an INPUT element to change it to a date type
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.
See above for details.
Last modified 4d ago