Estoy tratando de armar una forma de marcar varios componentes en HTML que se analizan con un script jQuery y se crean cuando se carga la página.

Por ejemplo, en este momento puedo poner lo siguiente en mi página ...

<a href="link.html" class="Theme-Button Theme-Button-Style-win2007 Theme-Button-iconLeft Theme-Button-AlignmentCenter Theme-Button-fullWidth">This is a button</a>

Cuando el script jQuery lo encuentre, inyectará el html necesario para crear un botón con un ícono y todos los eventos necesarios, etc.

Sin embargo, esto es complicado y requiere muchos nombres de clase largos. Prefiero hacer algo como esto ...

<a href="#" class="Theme-Button" data="{style: 'win2007', icon: 'left', align:'center', fullWidth: true}"></a>

No es mucho más corto, pero en mi opinión es más ordenado y requiere menos análisis. El problema es que he investigado un poco sobre los "expandos" y estoy bastante seguro de que a algunos navegadores no les gustará y no se validarán.

¿Alguien tiene alguna sugerencia mejor?