aria-controls需文档唯一id，如何编写带工具栏的小部件模板？

先看W3提供的ARIA工具栏示例：

<div class="format" role="toolbar" aria-label="Text Formatting" aria-controls="textarea1">…</div>
…
<textarea id="textarea1" rows="20" cols="80" style="font-family: sans-serif">…</textarea>

这里工具栏通过aria-controls属性关联对应textarea的id，但MDN明确规定id必须在整个文档中唯一，这就给制作可复用的编辑器模板带来了问题——固定id会导致多实例冲突。

最直观的解决办法是每次实例化模板时生成唯一id来关联：

<template class="text-editor">
    <div class="format" role="toolbar" aria-label="Text Formatting" aria-controls="{textarea-id}">…</div>
    …
    <textarea id="{textarea-id}" rows="20" cols="80" style="font-family: sans-serif"></textarea>
</template>

不过还有几种更优的实现方式：

1. 用DOM关系替代id关联 #

完全不需要依赖aria-controls，通过组件内部的DOM结构直接定位编辑区域，同时保留ARIA语义：

<template class="text-editor">
    <div class="format" role="toolbar" aria-label="Text Formatting">…</div>
    <textarea class="editor-area" rows="20" cols="80" style="font-family: sans-serif"></textarea>
</template>

在JS逻辑里，点击工具栏按钮时，直接通过工具栏的父容器查找.editor-area元素即可，比如：

// 工具栏按钮点击事件处理示例
toolbar.addEventListener('click', (e) => {
    const editorArea = toolbar.closest('.text-editor').querySelector('.editor-area');
    // 执行对应的文本格式化操作
});

这种方式彻底避开了id唯一性问题，组件复用性更强。

2. 借助Shadow DOM的作用域ID #

如果用Web Components开发，Shadow DOM内部的id是局部唯一的，不会和外部文档冲突，直接在模板里写固定id就行：

<template id="text-editor-template">
    <div class="format" role="toolbar" aria-label="Text Formatting" aria-controls="textarea1">…</div>
    <textarea id="textarea1" rows="20" cols="80" style="font-family: sans-serif"></textarea>
</template>

自定义元素挂载Shadow DOM的示例：

class TextEditor extends HTMLElement {
    constructor() {
        super();
        const shadow = this.attachShadow({ mode: 'open' });
        const template = document.getElementById('text-editor-template');
        shadow.appendChild(template.content.cloneNode(true));
    }
}
customElements.define('text-editor', TextEditor);

这样每个<text-editor>实例内部的textarea1 id都是独立的，完美解决冲突，同时ARIA关联也能正常工作。

3. 优化动态生成唯一ID的方案 #

如果不使用Shadow DOM，用浏览器原生的crypto.randomUUID()生成全局唯一ID比自定义规则更可靠：

function createTextEditor() {
    const template = document.querySelector('.text-editor');
    const instance = template.content.cloneNode(true);
    const uniqueId = crypto.randomUUID();
    
    const toolbar = instance.querySelector('[role="toolbar"]');
    const textarea = instance.querySelector('textarea');
    
    toolbar.setAttribute('aria-controls', uniqueId);
    textarea.id = uniqueId;
    
    document.body.appendChild(instance);
    return textarea;
}

这种方式避免了模板占位符替换的潜在问题，UUID的唯一性也有保障。

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