R
Reactiflux

Rinkusu – 02-11 Jan 19

Rinkusu – 02-11 Jan 19

LLaRynk
View on Discord
1/19/2022
I have some basic issue displaying my web component, any help please ? 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)
UUUnknown User
View on Discord
1/19/2022
2 Messages Not Public
Sign In & Join Server To View

Looking for more? Join the community!

R
Reactiflux

Rinkusu – 02-11 Jan 19

Join Server
Want results from more Discord servers?
Add your server