console 命令行工具 X clear

console

// 1. 创建MyButton自定义元素  
class MyButton extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({mode: 'open'});
        this.shadowRoot.innerHTML = `<button><slot>Button</slot></button>`;
    }
}
 // 2. 注册my-button标签,关联到MyButton
customElements.define('my-button', MyButton);

<head>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

</head>

<div id="app"></div>
<script type="text/babel">

function App(){
  const [message, setMessage] = React.useState("hello");
  
  let btn="这是一个按扭"
  function clickHandle(){
  	console.log("点击了")
    setMessage("hello WebComponent")
  }
  return <div>
  	<p>{message}</p>
    <my-button onClick={clickHandle} >{btn}</my-button>
  </div>
}

ReactDOM.render(<App />, document.querySelector("#app"));
</script>