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