Rinkusu – 02-11 Jan 19

I have some basic issue displaying my web component, any help please ?
L
LaRynk818d ago
Hi I'm trying to create a web component in pure JS but it does not display itself, any help please ?
class MyCounter extends HTMLElement {
constructor() {
super()
this.shadow = this.attachShadow({ mode: 'open' })
}

connectedCallBack() { this.render() }

render() {
this.shadow.innerHTML = `
<h1>Counter</h1>
${this.count}
<button id='btn'>+1</button>
`
}
}

customElements.define('my-counter', MyCounter)
class MyCounter extends HTMLElement {
constructor() {
super()
this.shadow = this.attachShadow({ mode: 'open' })
}

connectedCallBack() { this.render() }

render() {
this.shadow.innerHTML = `
<h1>Counter</h1>
${this.count}
<button id='btn'>+1</button>
`
}
}

customElements.define('my-counter', MyCounter)
<head>
<link rel='stylesheet' href='style.css'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<link rel='stylesheet' href='main.css'>

<div class='appContainer'>
<div class='panel'>
<my-counter></my-counter>
</div>
</div>

<script src='main.js'></script>
</body>
</html>
<head>
<link rel='stylesheet' href='style.css'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<link rel='stylesheet' href='main.css'>

<div class='appContainer'>
<div class='panel'>
<my-counter></my-counter>
</div>
</div>

<script src='main.js'></script>
</body>
</html>
(I'm sure the script file is well linked)
UU
Unknown User817d ago