Content attribute to import/export IDs across shadow boundaries #169
Description
During AOM sync up on 10/20, we came up with the idea of using content attribute to map ID across shadow boundaries like exportparts.
The idea here is to use innerIdent: outerIdent pairs to denote mapping of inner tree's ID with outer tree'd ID. For example, in the following example, radio_label defined in the shadow tree of my-element is exported as list in the outer tree, and ul is labeled by the div in the outer tree.
<div id="list">My radio label</div>
<my-element aria-maps="radio_label:list">
#shadow
<ul role="radiogroup" aria-labelledby="radio_label">
<li role="radio">Item #1</li>
<li role="radio">Item #2</li>
<li role="radio">Item #3</li>
</ul>
</my-element>In the following example, we export my_label in the shadow tree in label-element's shadow tree as radio_label and makes use of it by ul in the outer tree.
<label-element aria-maps="my_label:radio_label">
#shadow
<div id="my_label">My radio label</div>
</label-element>
<ul role="radiogroup" aria-labelledby="radio_label">
<li role="radio">Item #1</li>
<li role="radio">Item #2</li>
<li role="radio">Item #3</li>
</ul>Combining these two things together, we can export a label from one shadow tree and use it in another shadow tree:
<label-element aria-maps="my_label:list">
#shadow
<div id="my_label">My radio label</div>
</label-element>
<my-element aria-maps="radio_label:list">
#shadow
<ul role="radiogroup" aria-labelledby="radio_label">
<li role="radio">Item #1</li>
<li role="radio">Item #2</li>
<li role="radio">Item #3</li>
</ul>
</my-element>