javascript - <a> 要素が別のページにリダイレクトせず、クリックできません

私は、著作権文字列を作成するメソッドを宣言したウェブコンポーネントを作成しました:

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

それから、この文字列を HTMLParagraphElement に変換し、footer 要素に追加しています。ウェブブラウザを開くとエラーは表示されず、私の著作権要素も見えます。この要素を検査しても正しく見えますが、この要素の <a> 部分をクリックしても何も起こりません（しかし https://www.google.com にリダイレクトされるはずです）。

• なぜこの <a href="https://www.google.com">. ポリシーの条件</a> はクリック後に https://www.google.com にリダイレクトされないのですか？
• これをどう直せばいいですか？

AppFooter コンポーネント:

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;
    }
}

ウェブサイト上の要素:

検査された要素：

コードスニペット

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>

他に何か必要なものがあれば、コメントで教えてください

回答 #1

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

あなたはコンテンツを正しいコンテンツタイプとして解析していません。次のようにする必要があります:

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

おそらく、コンテンツをHTMLではなくXMLとして解析すると、ブラウザは<a>が特別な意味を持っているとは考えないのでしょう。

動作例：

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>