Add attributes
Maizzle can automatically add attributes to HTML elements in your email templates.
This can be useful for:
- adding default attributes based on build Environment or Template
- not having to write required attributes all the time
- automating email accessibility
The extraAttributes
key in your config defines which elements in your emails should receive which attributes with what values.
Usage
Here is how you would add a role="article"
attribute to a <div>
:
module.exports = {
extraAttributes: {
div: {
role: 'article'
}
}
}
Default attributes
By default, Maizzle makes any <table>
accessible, resets its spacing, and ensures that an empty alt=""
attribute is added to images that don't have it.
This is the default configuration:
let attributes = {
table: {
cellpadding: 0,
cellspacing: 0,
role: 'presentation'
},
img: {
alt: ''
}
}
Disabling
You may turn this off by setting extraAttributes
to false
in your config:
module.exports = {
extraAttributes: false
}
Selectors
Tag, class, id, and attribute selectors are supported:
module.exports = {
extraAttributes: {
div: {
id: 'new'
},
'.test': {
editable: true
},
'#test': {
'data-foo': 'bar'
},
'[role]': {
'aria-roledescription': 'slide'
}
}
}
Multiple selectors
Add multiple attributes to multiple elements in one go:
module.exports = {
extraAttributes: {
'div, p': {
class: 'test'
},
'div[role=alert], section.alert': {
class: 'alert'
}
}
}
Tailwind CSS
Any Tailwind CSS classes that you add with this Transformer need to be added to your content
key:
module.exports = {
content: ['config.js'],
}
API
const {applyExtraAttributes} = require('@maizzle/framework')
const html = await applyExtraAttributes('<div></div>', {div: {role: 'article'}})