eturn url?.hostname ?? this.hostname;
  }

  render() {
    return html`
      <link
        rel="stylesheet"
        href="chrome://browser/content/aboutlogins/components/login-alert.css"
      />
      <login-alert
        variant="error"
        icon="chrome://browser/content/aboutlogins/icons/breached-website.svg"
        titleId="about-logins-breach-alert-title"
      >
        <div slot="content">
          <h4
            data-l10n-id="about-logins-breach-alert-date"
            data-l10n-args=${JSON.stringify({ date: this.date })}
          ></h4>
          <span data-l10n-id="breach-alert-text"></span>
          <a
            data-l10n-id="about-logins-breach-alert-link"
            data-l10n-args=${guard([this.hostname], () =>
              JSON.stringify({
                hostname: this.displayHostname,
              })
            )}
            href=${this.hostname}
            rel="noreferrer"
            target="_blank"
          ></a>
        </div>
      </login-alert>
    `;
  }
}

customElements.define(
  "login-vulnerable-password-alert",
  VulnerablePasswordAlert
);
customElements.define("login-breach-alert", LoginBreachAlert);
customElements.define("login-alert", LoginAlert);
PK