kg-absolute-link.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import Routes from '@app/services/Routes';

const AnchorComponent = React.forwardRef(({ url, className, children }, ref) => (
  <a ref={ref} className={className} href={url}>
    {children}
  </a>
));

class AbsoluteLink extends HTMLElement {
  connectedCallback() {
    const target = this.getAttribute('target');
    const url = Routes.v8_document_abs_path(target);

    const reactContainer = document.createElement('div');
    this.appendChild(reactContainer);

    const root = ReactDOM.createRoot(reactContainer);
    root.render(
      <React.StrictMode>
        <AnchorComponent url={url} className="font-bold" />
      </React.StrictMode>
    );

  
    setTimeout(() => {
      const anchor = reactContainer.querySelector('a');
      while (this.firstChild && this.firstChild !== reactContainer) {
        anchor.appendChild(this.firstChild);
      }
    }, 0);
  }
}

export { AbsoluteLink };