LaRynk•3y ago

Rinkusu – 02-11 Jan 19

I have some basic issue displaying my web component, any help please ?

2 Replies

LaRynkOP•3y 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)

reactibot•3y ago

This question has an answer! Thank you for helping 😄 If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/565213527673929729/933181832030195782 This thread hasn’t had any activity in 12 hours, so it’s now locked. Threads are closed automatically after 12 hours. If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/565213527673929729/933181832030195782