38 lines
1.0 KiB
JavaScript
38 lines
1.0 KiB
JavaScript
|
import React, { useState } from 'react';
|
||
|
|
import { Button } from 'primereact/button';
|
||
|
|
import ReactDOM from 'react-dom/client';
|
||
|
|
|
||
|
|
import logo from './logo.svg';
|
||
|
|
|
||
|
|
const WcTestApp = () => {
|
||
|
|
const [ctr,incr] = useState(0)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="App">
|
||
|
|
<header className="App-header">
|
||
|
|
<img src={logo} className="App-logo" alt="logo" />
|
||
|
|
<p>
|
||
|
|
Edit <code>src/App.js</code> and save to reload.
|
||
|
|
</p>
|
||
|
|
<Button label={`clicked ${ctr} times`} icon="pi pi-check" onClick={()=>{incr(ctr+1)}}/>
|
||
|
|
</header>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
class WcTest extends HTMLElement {
|
||
|
|
connectedCallback() {
|
||
|
|
const mountPoint = this;
|
||
|
|
// to get attributes from outside
|
||
|
|
// const name = this.getAttribute('name');
|
||
|
|
|
||
|
|
// ShadowRoot (global styles will not apply, but safer with a complete isolation layer)
|
||
|
|
// this.attachShadow({ mode: 'open' }).appendChild(mountPoint);
|
||
|
|
|
||
|
|
const root = ReactDOM.createRoot(mountPoint);
|
||
|
|
|
||
|
|
// render
|
||
|
|
root.render(<WcTestApp />);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
customElements.define('wc-test', WcTest);
|