<a> element doesn't redirect to another page and is not clickable

Question

I created a web-component in which I declared method which creates a copyright string:

'<p>Copyright © 2020 Krzysztof Kaczyński<a href="https://www.google.com">. Policy terms</a></p>'

Then I am converting this string into HTMLParagraphElement and append to footer element. When I open web browser I do not see any errors and I can see my copyright element. If I inspect this element it also looks correct but if I click <a> part of this element nothing happens (but it should redirect to https://www.google.com).

• Why this <a href="https://www.google.com">. Policy terms</a> doesn't redirect to https://www.google.com after click ?
• How can I fix this ?

AppFooter component:

export class AppFooter extends KKWebComponent implements KKAppFooter {
    public static TAG: string = `${CONSTANTS.TAG_PREFIX}-app-footer`;

    public readonly shadowRoot!: ShadowRoot;

    private footer!: HTMLElement;

    constructor() {
        super(template);
        this.getElementsReferences();
    }

    protected getElementsReferences(): void {
        this.footer = <HTMLElement>this.shadowRoot.querySelector('footer');
    }

    public setCopyright({ year, author, termsReferenceUrl }: CopyrightProps): void {
        const copyrightText: string = AppFooter.formattedCopyrights`Copyright © ${year} ${author}. Policy terms${termsReferenceUrl}`;
        this.footer.appendChild(new StringElementConverter().toElement(copyrightText));
    }

    private static formattedCopyrights(strings: TemplateStringsArray, ...values: string[]): string {
        const policyTermsUrlText: string = `<a href="${values[values.length - 1]}">${strings[strings.length - 2]}</a>`;
        let formattedText: string = '<p>';
        for (let i = 0; i < values.length - 1; i++) {
            formattedText += `${strings[i]}${values[i]}`;
        }
        formattedText += `${policyTermsUrlText}</p>`;
        return formattedText;
    }
}

Element on website:

Inspected element:

Code snippet

class StringElementConverter {
    constructor() {
        this.domParser = new DOMParser();
    }

    toElement(xmlString) {
        const parsedString = this.domParser.parseFromString(xmlString, 'text/xml').firstElementChild;
        if (parsedString == null) {
            throw new Error(`This xml string ${xmlString} is not parsable to Node`);
        }
        return parsedString;
    }
}

const template = `
<footer>
  <slot name="prepend"></slot>
  <slot name="center"></slot>
  <slot name="append"></slot>
</footer>
`;

class AppFooter extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = template;
        this.getElementsReferences();
        this.setCopyright({
            year: '2020',
            author: 'Krzysztof Kaczyński',
            termsReferenceUrl: 'https://www.google.com',
        });
    }

    getElementsReferences() {
        this.footer = this.shadowRoot.querySelector('footer');
    }

    setCopyright({ year, author, termsReferenceUrl }) {
        const copyrightText = this.formattedCopyrights`Copyright © ${year} ${author}. Policy terms${termsReferenceUrl}`;
        this.footer.appendChild(new StringElementConverter().toElement(copyrightText));
    }

    formattedCopyrights(strings, ...values) {
        const policyTermsUrlText = `<a href="${values[values.length - 1]}">${strings[strings.length - 2]}</a>`;
        let formattedText = '<p>';
        for (let i = 0; i < values.length - 1; i++) {
            formattedText += `${strings[i]}${values[i]}`;
        }
        formattedText += `${policyTermsUrlText}</p>`;
        return formattedText;
    }
}
customElements.define('kk-app-footer', AppFooter);

<kk-app-footer></kk-app-footer>

If you need anything else let me know in comments

Answer 1

this.domParser.parseFromString(xmlString, 'text/xml')

You're not parsing your content as the right content type. You want:

this.domParser.parseFromString(xmlString, 'text/html')

I'm guessing that when you parse the content as XML instead of HTML, the browser doesn't think that <a> has any special meaning.

---

Working example:

class StringElementConverter {
    constructor() {
        this.domParser = new DOMParser();
    }

    toElement(xmlString) {
        const parsedString = this.domParser.parseFromString(xmlString, 'text/html').firstElementChild;
        if (parsedString == null) {
            throw new Error(`This xml string ${xmlString} is not parsable to Node`);
        }
        return parsedString;
    }
}

const template = `
<footer>
  <slot name="prepend"></slot>
  <slot name="center"></slot>
  <slot name="append"></slot>
</footer>
`;

class AppFooter extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = template;
        this.getElementsReferences();
        this.setCopyright({
            year: '2020',
            author: 'Krzysztof Kaczyński',
            termsReferenceUrl: 'https://www.google.com',
        });
    }

    getElementsReferences() {
        this.footer = this.shadowRoot.querySelector('footer');
    }

    setCopyright({ year, author, termsReferenceUrl }) {
        const copyrightText = this.formattedCopyrights`Copyright © ${year} ${author}. Policy terms${termsReferenceUrl}`;
        this.footer.appendChild(new StringElementConverter().toElement(copyrightText));
    }

    formattedCopyrights(strings, ...values) {
        const policyTermsUrlText = `<a href="${values[values.length - 1]}">${strings[strings.length - 2]}</a>`;
        let formattedText = '<p>';
        for (let i = 0; i < values.length - 1; i++) {
            formattedText += `${strings[i]}${values[i]}`;
        }
        formattedText += `${policyTermsUrlText}</p>`;
        return formattedText;
    }
}
customElements.define('kk-app-footer', AppFooter);

<kk-app-footer></kk-app-footer>