Prevent multiple <a> tags in progressively enhanced usa-link

[bjmfactory]

Summary

Prevented multiple tags in progressively enhanced usa-link Fixed an issue in which there are nested tags in the usa-link when a childLink is provided.

Problem statement

We want only one tag in the output HTML when we use the progressively enhanced usa-link.

Desired state:

<usa-link>
  #shadow-root (open)
  <!--?lit$464523568$-->
  <a href="http://designsystem.digital.gov" class="usa-link"><!--?lit$019672011$-->It's dangerous to go alone. Here, take this.</a>
  <!--?-->
</usa-link>

The actual state

<usa-link>
  #shadow-root (open)
  <a href="http://designsystem.digital.gov"><!--?lit$464523568$-->It's dangerous to go alone. Here, take this.</a>
  <!---->
  <a class="usa-link" href="http://designsystem.digital.gov/"><slot></slot></a>
</usa-link>

Consequences of remaining in the current state It is invalid HTML.

Solution

I removed the wrapper tag and instead added the usa-link class to the existing link that is passed as a child. It's quite possible I did not follow Web Component best practices or your company best practices, or that there are other things I'm not considering, so there are lots of limitations :)

Testing and review

I added a test that asserts that there is only one tag.