apinet/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, minimum-scale=1, initial-scale=1"
    />
    <base href="/" />
    <meta
      name="title"
      content="conditional UI | Plain hold html vs Custom Element"
    />
    <link
      rel="icon"
      type="image/svg+xml"
      href="https://github.githubassets.com/favicons/favicon.svg"
    />
    <title>conditional UI | Plain old html vs Custom Element</title>

    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }
    </style>

    <script type="module">
      class UiInput extends HTMLElement {
        constructor() {
          super();
          this.attachShadow({ mode: "open" });
        }
        async connectedCallback() {
          this.render();
          const cred = await this.startConditionalUI();
          console.log(cred);
        }

        async startConditionalUI() {
          const pCred = navigator.credentials.get({
            publicKey: {
              challenge: new Uint8Array([1, 2, 3, 4]),
            },
            mediation: "conditional",
          });

          console.log("conditional started");
          return pCred;
        }

        render() {
          const template = document.createElement("template");
          template.innerHTML = `
            <input
              name="username"
              type="email"
              placeholder="enter your email"
              autocomplete="username webauthn"
            />
          `;
          this.shadowRoot.appendChild(template.content.cloneNode(true));
        }
      }

      window.customElements.define("ui-input", UiInput);
    </script>
  </head>

  <body>
    <article>
      <h1>html</h1>
      <p>Conditional UI inside traditional html file:</p>
      <input
        name="username"
        type="text"
        placeholder="enter your email"
        autocomplete="username webauthn"
      />
    </article>
    <article>
      <h1>custom element</h1>
      <p>Conditional UI inside a custom element:</p>
      <ui-input>loading</ui-input>
    </article>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<meta
	name="viewport"
	content="width=device-width, minimum-scale=1, initial-scale=1"
	/>
	<base href="/" />
	<meta
	name="title"
	content="conditional UI \| Plain hold html vs Custom Element"
	/>
	<link
	rel="icon"
	type="image/svg+xml"
	href="https://github.githubassets.com/favicons/favicon.svg"
	/>
	<title>conditional UI \| Plain old html vs Custom Element</title>

	<style>
	html,
	body {
	margin: 0;
	padding: 0;
	}
	</style>

	<script type="module">
	class UiInput extends HTMLElement {
	constructor() {
	super();
	this.attachShadow({ mode: "open" });
	}
	async connectedCallback() {
	this.render();
	const cred = await this.startConditionalUI();
	console.log(cred);
	}

	async startConditionalUI() {
	const pCred = navigator.credentials.get({
	publicKey: {
	challenge: new Uint8Array([1, 2, 3, 4]),
	},
	mediation: "conditional",
	});

	console.log("conditional started");
	return pCred;
	}

	render() {
	const template = document.createElement("template");
	template.innerHTML = `
	<input
	name="username"
	type="email"
	placeholder="enter your email"
	autocomplete="username webauthn"
	/>
	`;
	this.shadowRoot.appendChild(template.content.cloneNode(true));
	}
	}

	window.customElements.define("ui-input", UiInput);
	</script>
	</head>

	<body>
	<article>
	<h1>html</h1>
	<p>Conditional UI inside traditional html file:</p>
	<input
	name="username"
	type="text"
	placeholder="enter your email"
	autocomplete="username webauthn"
	/>
	</article>
	<article>
	<h1>custom element</h1>
	<p>Conditional UI inside a custom element:</p>
	<ui-input>loading</ui-input>
	</article>
	</body>
	</html>