<h4 dir="auto">Problem</h4>
<p dir="auto">Say you have a component template:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div class=&quot;autocomplete&quot;&gt;
  &lt;input role=&quot;combobox&quot; class=&quot;autocomplete-trigger&quot; 
      aria-autocomplete=&quot;list&quot; 
      aria-active-decendant=&quot;&quot; &lt;!-- = Whichever option ID is focused --&gt;
      aria-owns=&quot;autocomplete-menu&quot;&gt;
  &lt;ul id=&quot;autocomplete-menu&quot; tabindex=&quot;-1&quot;&gt;
    &lt;li *foreach=&quot;#opt in options&quot; role=&quot;option&quot; [id]=&quot;opt.id&quot;&gt;Alpha&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">autocomplete</span>"<span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">role</span>="<span class="pl-s">combobox</span>" <span class="pl-c1">class</span>="<span class="pl-s">autocomplete-trigger</span>" 
      <span class="pl-c1">aria-autocomplete</span>="<span class="pl-s">list</span>" 
      <span class="pl-c1">aria-active-decendant</span>="" <span class="pl-c">&lt;!-- = Whichever option ID is focused --&gt;</span>
      <span class="pl-c1">aria-owns</span>="<span class="pl-s">autocomplete-menu</span>"<span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">ul</span> <span class="pl-c1">id</span>="<span class="pl-s">autocomplete-menu</span>" <span class="pl-c1">tabindex</span>="<span class="pl-s">-1</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">li</span> <span class="pl-c1">*foreach</span>="<span class="pl-s">#opt in options</span>" <span class="pl-c1">role</span>="<span class="pl-s">option</span>" <span class="pl-c1">[id]</span>="<span class="pl-s">opt.id</span>"<span class="pl-kos">&gt;</span>Alpha<span class="pl-kos">&lt;/</span><span class="pl-ent">li</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;/</span><span class="pl-ent">ul</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">In this example, use of an ID is necessary for the <code class="notranslate">aria-owns</code> attribute. With the current shadow DOM emulation, it will not work to have multiple instances of this component on the page at the same time because the IDs would be duplicated.</p>
<p dir="auto">Other use cases include <code class="notranslate">&lt;label&gt;</code>, <code class="notranslate">aria-labelledby</code>, <code class="notranslate">aria-controls</code>, <code class="notranslate">aria-described-by</code>, <code class="notranslate">aria-flowto</code></p>
<h4 dir="auto">Possible solutions</h4>
<p dir="auto">There are a few different ways we could handle this.</p>
<h5 dir="auto">Put the burden on the user</h5>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="   &lt;input [id]=&quot;myGeneratedUniqueInputId&quot;&gt;
   &lt;label [for]=&quot;myGeneratedUniqueInputId&quot;&gt;"><pre class="notranslate">   <span class="pl-kos">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">[id]</span>="<span class="pl-s">myGeneratedUniqueInputId</span>"<span class="pl-kos">&gt;</span>
   <span class="pl-kos">&lt;</span><span class="pl-ent">label</span> <span class="pl-c1">[for]</span>="<span class="pl-s">myGeneratedUniqueInputId</span>"<span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">This is what people would have done in Angular 1. Adopting this should just be a matter of documentation.</p>
<h5 dir="auto">Automatically recognize ID attributes and shim ID isolation</h5>
<p dir="auto">If the user writes:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="   &lt;input id=&quot;name&quot;&gt;
   &lt;label for=&quot;name&quot;&gt;"><pre class="notranslate">   <span class="pl-kos">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">id</span>="<span class="pl-s">name</span>"<span class="pl-kos">&gt;</span>
   <span class="pl-kos">&lt;</span><span class="pl-ent">label</span> <span class="pl-c1">for</span>="<span class="pl-s">name</span>"<span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">Angular will recognize any standard attributes that use an ID reference (or list of ID references) and automatically convert them into document-unique IDs them.</p>
<h5 dir="auto">Add some syntax to identify IDs for unique conversion</h5>
<p dir="auto">Specific syntax aside, something like:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="   &lt;input ##id=&quot;name&quot;&gt;
   &lt;label ##for=&quot;name&quot;&gt;"><pre class="notranslate">   <span class="pl-kos">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">##id</span>="<span class="pl-s">name</span>"<span class="pl-kos">&gt;</span>
   <span class="pl-kos">&lt;</span><span class="pl-ent">label</span> <span class="pl-c1">##for</span>="<span class="pl-s">name</span>"<span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">This has the benefit of not having to hard-code the list of ID-reference attributes, but still incurs the same performance cost as the previous solution.</p>
<p dir="auto"><strong>I'm submitting a ...</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[ ] bug report =&gt; search github for a similar issue or PR before submitting
[x ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see "><pre class="notranslate"><code class="notranslate">[ ] bug report =&gt; search github for a similar issue or PR before submitting
[x ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see 
</code></pre></div>
<p dir="auto">I'm trying to extend a RouterLink directive to append a prefix to each link. <code class="notranslate">&lt;a myLink="/photos"&gt;</code> -&gt; <code class="notranslate">/myregion/photos</code>, where <code class="notranslate">myregion</code> is a state value, shared by service. Right now the only simple way I see is to copy-paste existing code and change it for my needs, because I tried several obvious solutions and they didn't work</p>
<p dir="auto">It would be great to have an official way to reuse a code.</p>