Live Editor

Result

Loading...

Live Editor

function showComponent(props) {
  class HelloWorld extends HTMLElement {
    connectedCallback() {
      this.textContent = `Hello ${this.getAttribute('name') || 'World'}!`;
    }
  }
  if (!customElements.get('hello-world')) {
    customElements.define('hello-world', HelloWorld);
  }
  const name = 'Bing';
  return (
    <div>
      <hello-world name={name} onClick={() => alert(`Hi ${name}, it is me.`)}></hello-world>
    </div>
  );
}