如何设置HTML元素属性为null 实现无值布尔属性效果（不修改outerHTML）

要在不修改outerHTML的前提下给元素添加无值布尔属性（即渲染为<element key>形式，不带等号和属性值），不要使用setAttribute方法——该方法会自动将第二个入参转为字符串，传入null会得到key="null"，传入空字符串会得到key=""，都不符合要求。

推荐使用以下两种标准DOM API实现：

• 优先使用Element.toggleAttribute()，这是专门用于切换布尔属性的原生方法，当第二个参数传入true时，会直接添加无值的目标属性，不会附带任何属性值：

const comp = document.querySelector('my-comp')
// 添加无值show属性，最终元素渲染结果为 <my-comp show>
comp.toggleAttribute('show', true)

// 需要移除该属性时，第二个参数传false即可
comp.toggleAttribute('show', false)

• 如果需要兼容不支持toggleAttribute的老旧环境，可以通过创建属性节点的方式实现，效果完全一致：

const comp = document.querySelector('my-comp')
const showAttr = document.createAttribute('show')
comp.setAttributeNode(showAttr)

注：HTML规范中布尔属性的判定逻辑只看属性是否存在，和属性值无关，即使属性值被设为空字符串、属性名同名字符串，功能上都能正常生效，上述两种方法可以保证最终DOM渲染形态为标准的无值属性格式。

内容的提问来源于stack exchange，提问作者David Min