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
Problems
<a>elements cannot be disabled without the use of javascript.pointer-events: none;in CSS will prevent mouse interaction, but as long asa[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.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.a[target]attribute can fall victim to exploitations of thewindow.openerAPI.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.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.a[href]is removed (disabling navigation and interactivity on<a>)a[href], except whenhx-link[disabled]is presenta[download], unlessa[href]is missing orhx-link[disabled]is present_self(default), seta[rel="noopener noreferrer"]to improve performance and securitya[rel]value, if present. Otherwise seta[rel]to the same value ashx-link[rel]References
rel=noopener: What problems does it solve?<a>MDN