evanchen
/
prime-react-webcomponent
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

master
Evan Chen 2022-07-18 11:10:42 +08:00
parent f1698b4cb2
commit 6b63b9f8c6
3 changed files with 14 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -9,11 +9,11 @@
content="Web site created using create-react-app" content="Web site created using create-react-app"
/> />
<title>React App</title> <title>React App</title>
<link rel="stylesheet" href="dist/index.css"> <link rel="stylesheet" href="index.css">
</head> </head>
<body> <body>
<wc-test id='test' name='Evan'></wc-test> <wc-test id='test' name='Evan'></wc-test>
</body> </body>
<script src="dist/index.js"></script> <script src="index.js" type="module"></script>
</html> </html>

19
index.js
View File

@ -26,12 +26,8 @@ WcTestApp.defaultProps = {
class WcTest extends HTMLElement { class WcTest extends HTMLElement {
root; root;
// declare attributes we want to keep track of constructor(){
static get observedAttributes() { super()
return ['name', 'onclick'];
}
connectedCallback() {
let mountPoint = this; let mountPoint = this;
// ShadowRoot (global styles will not apply, but safer with a complete isolation layer) // ShadowRoot (global styles will not apply, but safer with a complete isolation layer)
@ -41,14 +37,19 @@ class WcTest extends HTMLElement {
this.render() this.render()
} }
render(){ // declare attributes we want to keep track of
static get observedAttributes() {
return ['name', 'onclick'];
}
// connectedCallback() {
// }
render(){
const name = this.hasAttribute('name') const name = this.hasAttribute('name')
? this.getAttribute('name') ? this.getAttribute('name')
: undefined; : undefined;
console.log(this.root)
this.root.render(<WcTestApp name={name} />); this.root.render(<WcTestApp name={name} />);
} }

4
package.json
View File

@ -10,8 +10,8 @@
"react-dom": "^18.2.0" "react-dom": "^18.2.0"
}, },
"scripts": { "scripts": {
"start": "yarn parcel index.js index.css", "start": "yarn parcel index.html",
"build": "yarn parcel build index.js index.css" "build": "(rm -rf dist||true) && yarn parcel build index.html"
}, },
"browserslist": { "browserslist": {
"production": [ "production": [