<div class="wrapper">
  <my-circle width="100" height="100" color="white" bgColor="black">初期表示</my-circle>
  <button id="createBtn">カスタム要素を作成する</p>
</div>

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
my-circle:not(:defined) {
  opacity: 0;
  width: 100px;
  height: 100px;
}
button {
  margin-top: 2rem;
}

class MyCircle extends HTMLElement {
  constructor() {
    super();
  }
  connectedCallback() {
    const width = this.getAttribute("width") || 10;
    const height = this.getAttribute("height") || 10;
    this.style.display = "flex";
    this.style.justifyContent = "center";
    this.style.alignItems = "center";
    this.style.width = `${width}px`;
    this.style.height = `${height}px`;
    this.style.borderRadius = "50%";
    this.style.backgroundColor = this.getAttribute("bgColor") || "transparent";
    this.style.color = this.getAttribute("color") || "inherit";
    this.textContent = "MyCircle";
  }
}

const btn = document.getElementById("createBtn");
btn.addEventListener("click", () => {
  if (!customElements.get("my-circle")) {
    customElements.define("my-circle", MyCircle);
  }
});