Feature Request (<hx-link>)

[CITguy]

Problems

• Vanilla <a> elements cannot be disabled without the use of javascript.
  • Using pointer-events: none; in CSS will prevent mouse interaction, but as long as a[href] is present, the browser will allow keyboard interaction.
• <a target="_blank"> will run the new page on the same process as the current page.
  • This can have performance issues if the new page has heavy amounts of JavaScript to load.
  • Pairing this with rel="noopener" will help alleviate this issue in modern browsers, but developers have to remember/know to do this every time they render a hyperlink.
• Most non-blank values for the a[target] attribute can fall victim to exploitations of the window.opener API.
  • Pairing with rel="noopener noreferrer" should alleviate this problem, but relying on developers to remember/know to do this every time leads to potential security risks.

Proposed Solution

We should create a <hx-link> element that wraps vanilla <a> functionality in order to automatically correct the problems described above. This remains accessible, because the user is interacting with the <a> element, instead of the custom <hx-link> element.

<hx-link
    [href=""]
    [download=""]
    [disabled]
    [target=""]
    [rel=""]
>
    #shadowroot
        <a><slot></slot></a>
    #/shadowroot

    Link Text
</hx-link>

Attribute Pass-Through

Values of some <hx-link> attributes may affect the value or appearance of attributes set on the <a>, in order to apply best practices in regards to security and performance.

• disabled - when present, a[href] is removed (disabling navigation and interactivity on <a>)
• href - pass through to a[href], except when hx-link[disabled] is present
• download - pass through to a[download], unless a[href] is missing or hx-link[disabled] is present
• target - if set to a non-blank value other than _self (default), set a[rel="noopener noreferrer"] to improve performance and security
• rel - append to existing a[rel] value, if present. Otherwise set a[rel] to the same value as hx-link[rel]

References

• About rel=noopener: What problems does it solve?
• Opens External Anchors Using rel="noopener"
• <a> MDN
• Link type "noopener"
  • WHATWG
  • caniuse
• Link type "noreferrer"
  • WHATWG
  • caniuse