Don't be  afraid to create your custom-elements anymore.
Tags: webreflection, javascript
Published: 2021-02-23 13:49:21

Many frameworks use the counter sample to illustrate how they update the view while changing a counter value.

Look at this sample made with [wickedElements](https://github.com/WebReflection/wicked-elements) and [uhtml](https://github.com/WebReflection/uhtml).

With 'wickedElements' you have all the benefits of custom elements,
without it's complexity

[![counters.jpg](https://i.postimg.cc/RCXs2GNM/counters.jpg)](https://postimg.cc/RqJLH778)

HTML Part

```html
<my-el name="C1"></my-el>
<my-el name="C2"></my-el>
<my-el name="C3"></my-el>
```

JS Part

You can see how easy it is to define a 'pseudo' custom-element.
No need to extend any Class or Component, simply define it as a simple object with same API as custom-elements and add your own methods and event handlers.

I have defined a 'paint' method, in order to refresh the view.
You can see that the view is not entirely updated.
Thanks to 'µHTML'.

The 'startRequest' is here to demonstrate how asynchronous data can be handled.

If you like micro libraries, then give it try.

```js

let Header = (el) => html`
  <h2>Counter demo : ${el.name}<h2>
`

let Counter = (el) => html`
  <h2 class = ${el.setClass()} >${el.counter}</h2>
  <input class = ${el.setClass()} value="saved between repaint !!"/>
  <button onclick=${() => {el.counter += 1; el.paint()}}>
    INC
  </button>
  <button onclick=${() => el.startRequest()}>RAND</button>
`

let App = (el) => html`
  <div style="border:1px solid black; margin-bottom:10px;padding:10px">
    ${Header(el)}
    Random value : ${el.data === 0 && html`waiting for computation...` || el.data}
    ${Counter(el)}
  </div>
`

we.define('my-el', {
  init () {
     this.counter = 0;
     this.data = 0
     this.name = this.element.getAttribute("name");
  }, 

  connected () {
    this.paint()
    this.startRequest()
  },
  
  async startRequest () {
    this.data = await new Promise((res, err) => {
      this.data = "waiting..."; this.paint();
      setTimeout(() =>  res(Math.random() * 100 + 1), Math.random()*1000)             
    })
    this.paint()
  },
  
  setClass() {
    return this.counter < 10 ? "green" : "red"
  },
  
  paint ()  {
    render(this.element, App(this));
  }
})
```

You can test it here : [WickedCounter](https://flems.io/#0=N4IgtglgJlA2CmIBcBWAbAOgEwoDQgGcBjAJwHtZZkBtABl1oF18AzCBAm0AOwEMxESEBgAWAFzBV8RMtzHw5yEAB4wATwC08WAAI+AgLwAdEAGEAjCYB8ygPTqtsK0e6rN2vf3jGzWa3YdtZ24XUJDuEHwCbXgiMQhZTiEsJFoQAF9cHi8ldVgIACMMACtOaVl5RSEZbgIxHQANHQMdc1p2sJd4AA8ABzISeuBGnXTIwhi4hNqlAGYkc3MMrJB9QWFS8ZrKsSUXGrqdAHcIIgBreCgAUQQBOQIDFgBXbinZAAp4AEpgEyfonR1EinMQmADcADdeCQdGIfM9XvFZCYDAYxGpevAyCwdAAFciQaIAfnxZEJ8CQCLe3E+PyhMLh1GY3AMtDBJHgYieJG4Ong73eVKRNJ+LPMuDEGAIvXyRH5tC+GBYAyuvCIIneJC+6S+XyyYhECiQJHSYKF0x0JFpwA5XJ5eiJ0TEABUIAIyE8xLSkJLev8Nd8JSIIAR0pkWeaPt8bZzuSEQABHJ7wEhqADKkzEAwAgpQTBBefBMiQDEylex5CRcBADAB5ArFWKS0jwXjyXBkOsNpsYC5qAi4J4GbjwI46ADqrbOAFleL1cLxh6OdBmxLhYKXmEQDMBMg9d7gWI8XtTPhKfsqrfS9AYnhgAOac95iPUl+g1+AYBDce8G9nKCB2QAaiAuloR0Tt4GoEhmEXMgMDEaFHzXDd4LbMRgQKT14AAOS8XBt3gigoAANV4WBk1wB5eAfTlszEDDCmw95YC+MFuAwdDMOw0wRF4H9LhYgiqO1TIoGPRFpmta84RHMdJ14Gc52rCTTxfYBrw-DAkxTNQwQgFh3ggL8FF-EQvkvd5ryHehF0lb8zLBJ5lF4JyQK+MhNQwIhyNgZ9qCeRhOJgS4cLIKB4AHbg9QAQnfPVPJIbzfP8wKMA5MAyAhULwsi3BotwGLxQgbUO1U4U9E1asOwvAYrPA3h1wIgwkKeO4xAIEyfwNKxZgAMj6iEyGgHRaBi1FWvaghqFmRgiUmhQOpmxgkDkldOSo8qpIHFhcCgXBzOAAz3hiohRF4AhBQMEhqCgRhdSOwyzt4GBBT1ErLOvCFcHvW83twApWVwXoDHghy-wKZRejBAp3PvZLKEFXAIVB6gCnugbn3Oy6WC+AAfPHJSdJG1tXPV3geSVkLexU+MuiF8bxingqgKy9U-PjuDgfldogZHdTY7QAUlOm3sxynaK9XGJQwCKEHkf7OsvVV1QFSMaXUjn+O5pG+ZfHVdXYwVtOTVMMwQOIc0Rsh3o7AjtUXAcNxYTIj3ocSkvBkQzWUKAzXcy7GtgQ9SqHdXrVtOM+QwMA23VSKCc-I54AKM4IDEWcxHjghzabAZE5jghM+z3PLZNBcto+dTrxZGL3gW+4urMqxzAGoaRrGiaSHvNrFum8x7oJhuloHsFPLXbhcE-HTU1Kjc1unT022metohIbKrRK5rP3IMgxAJqAyCIXu5E26fTb0yP7VgDAyAKNfsveIgsnVdgoAAGRDMQkDiqingKDC8AKRxR1FRJuBoBq8CfibXSpcswkFzH5AguoshQHIL0SkJ5hTWk+uBFk9ASyfi9uxZQJB2LuUlHLTk-IoLcHuq7CiBARCYMkh8H4EAWIIUUvAAASrEAYUBLq6kyHfB+KYkDB16NCaISBeBhneMAGeagJEHW1ggFhp54ASnymBGEJYiDUDoWVJKYAK6e3XNdW+m14LU2+ATcOWiJ64C1MAXBMJOwcKrMAGI7UkDeO4L3EgvACjqN-lCCiFIiygMXPQee4Dva8GULAMEvB3KfhetcbKchP51AUCmd43BqC8CCmuMg+UilBRtmCImT4tE2w7BgAs6cBrwSaV6Ni15txJVESmbKUB6KMSwvIAg+knq6MBEuMci9ELClXr0-JuMwSdR6evGhWQuJMWGT-WyDFuLyFrLAUi5FkzbIXLszZ8AABiFZxFnVjr0NWWCpLqSvoWbGAy9n8hfC0zi5yhnwF4vxR8rMJ5PEoFPSWHyLnPhQWIA2oC7zEwHDbdIryILpDPGUoOepxJiCJCYGoI44iXBMEgEwUAQyEqbCSkAYIoA6ALICAa007rvFEnqEQBgoCy3QcjLlSpGEiB+vyqRJBogA0rjSRx7DDIaHMEkxpXMei1kMt8L4BpyBjjWlcEg5ArTkqeDKU4bZLhIB0CYIC3xIRsrNHVGum5nEGA4QEygeohzjz1G7Pat54k+z9iwdyGlwKcqeNQFgjBRnvFsAAPVkLYBCkUvTmQGjFWwtZejCgIAAEnjcMpND1ryAzENQEQQETDpszSYRgBMiq4DAAYEQCEyDvzIMnEgpgLr8j1EcAwYApSyn5FgNiHE-RMIUd-I4HYkAFFATdI4jAG11vGg2zGPbG0EAHe8LAuBZiKizC2ttHbohsqAuuzdu7nHUHnYukd-px1IEnWQad8L0gcS9pjEWaj4BXCyXCBxPwDQhmgtQT86JMSMEYLSUBN9R0Bj1AY+AC7gBgFWsuBSSl5ywFWlOuFP13iH2Pu1GBZtMxWz8mq4GtIFzY1pATaaiGMAAH02WZBBv+x6J1PgMt5Mg8Zk8SxrS9IKJ5UZRQGCLIbejSHGPYazcaMMaKpMYCzaaNFn4IpsBHAYAoEKNMFngNmAgahXiSrPBPH4NEMlUYKGeI63B04aOwRZmj3xMY0SoQrQM7SEKGhpMJ1hGtxklkofAFgvAwViDBDfaUm6b4Fgit0FVVHzAcvw0fE+kolFwLI7Scm3ACYFC+GeLUBt2WZE-MhUz0ZXlPxA9WvGTxFRkHKxgQ194gkRSqz8G+76+pWTZXhurwiIVHF8wAEVC-p8S84iwKJ1GCfYiR6hPHEJIZoOh2N-ABECEE4IZJdZjHabgwBkKOeeT8NTksYV7k5GdquOjDtR0-MTcz+UwzhgMLYd41Bo1GCMAQP7f3nAgAAOQGEYKBP7BAABUxh-vQ++yDqtRIvg5sdTG94RJZEcl4HjAona8ckDxjIWAeN4BgAKJcPGIgidunvHjAsfp959kfPl-I3Azh4zuE8dO5Oueclx6K-geMCAehIHKQmQTzh4yOAULUOa+aLlsMoIpGgABejAftWAhwrsqtgrA-eUNr6HaPtzK++7wdXEPVdq9oBoAAnEgJjGhGDQ6K1r13KP3h-f118Ww94+ZDlsFDoCaOazqz5M+B7aLaDKG4BoDQbmE11H8nQxmMV4J5tTxjPqXydFzyq9o6Kj37RJSzy+IkFITDKBMN5WQPkvQvjr68NsBT0rwBlGqfkTxcAmBMHqfwweQCKhqA3qP1h++u0L2uFxbidCLiZGVIhpkDSDlMy468kFoJyojTRWDbes82wGhwrRWoiTwQ5J3uUBTcD+c0flBcF3Yw8j78IUfrem-v69CQOVveQA+BH3r1b1xzxiR1B0AJby9GimbzH14HxRAFJTAJB21F1DJQQLfyAK9DKT7yMG6FmCIBigT37xgI-wgLHx-3FBMCINwNmHgH71KiPHMB9jIH9lAieDehSQwH3ygjIB3w6XAmohKGGhpFfz3WBDABtTRRIEdCQE6kv1gC7yfnXFKgeGzF1V4DUEaQIDUKCTUG9UXxRm5Xi2VV2hBm5Q3VOC0U5QcXPBL15EWHMFRHEwwG4FymdAxHgCJHMFsDEGUFoCJDxXY320-DYDFTEF4jfnymcIULqAiMOUdQIwy28hx3kB4SBS7XZGf15CSidDTEQkGGzBYErBhWcSlE5CuC5kKOKIKiSg8wBQqD7gGzhW9CIQunCODEOR9ErwwHCWTCSy+CQBCIgDCLiKgEGMyHrSCPAjhBMBYCCXvHahMCiJMHkDAE73kCWJLAJQaLkHzF5E8miiJCmIZFBgKTYjRUlALBHBIAAAlnRpx35xMZZthFp0g7spUgtTiXxmoDi3VhwwVkljoY0fs-s0xPdlAn4KBMckB2sPRegvgiRCZoTDQXo8dwo1A8ZlQ948YicoBqddRbBjIs81Ug0YQaw+F7wrg+hlMmCzoriUw7iHifBlBEIQl4BgdLUy0VAfDgkEBgc18zostSMEFEYSp0ghZ4AdA6TuBrjGTHitEhwzpX5DkwoIoRk0UoEqxGtnFVMsiNsRMpVbCasTACAIR7wURUQ8UiBjQitvhTQI8oFpVXE7U8E0RfV48NAwQvh0lehMQuZRj-ImBtQI9fi7CbxLTuiWwTUxt0t2pLl5j2o2VBjkjWx5AbhydFocI0xvcQBxAxAMFbBbAjhiyMAjhZhb5u5bBzB7cazbBuhVtYAljop0gI8iBpJXSPVHVPJyUIAIR+9MijtLRFVZT7jHiQdlBTT7wdBuhJBagfA8yCyiySyyyKz7xbAsB2haBbBJzrAQdOTq9tyzT+SoF+NywRiOjuVlSoBVTIo9RuB5FEj2o9RfobCXk9TPwrybzpoxBGBMg1ADs59GRmRnDRVMzcp2IvTfQ70IQEY-IOJPzcoBwKMWRPhhxFRQK5AbyByo5cMe1HzFoJUjgUyTVnQOR4BxxyILgqwcIDAiK3R+hBgbzcBugDBzBxocJ4lcBTADBugjiDSzNo89SOKfJEZ8LT4JDHEdFCoFQ3jTFsweK+KAsI49SigRK-IxK1wtFzAsB7d8oATCoUs3j2M0VVKUoNKp5cBtL7dSozhp9BLBzXyH8qxeBaorxwJOw30V8hVtx7IvK18ykaxYkgYjwXVATlAiACZYBlAngvTjptxUQPoXSYQHhnIyAiRYAiQrRClYAd9cANAFQXCegxA0xCh2d7xjQCkAoNBYBmAFRZEotoqvTPwCw14xAAAhULAYfkLK6gWAECZgFLESMECUhlQyIcVEViSyfScKr0lgAaFgGjYtCAQeMndvTKbKAMq0Ja5gOVFBCAECYa2AAEY6bapw7K+6faoCdcA6kak66gIgHfM6qqgeL4B6jQQcBPQ646wyU61EQpJ4HfAac6pw4tB6l60knQD2fyBPIgHalLQq7oYq0qgse8YaxVVqjqy8bqyqvqoCAa18fyS6uGxUEcRGkqkJFG9mdGlMdqzqjkTUSqhPQKSynFPUUGhdf638iUjjGKXGVxSZHQWcaGOfFGZJCERqiyMoqA6gCEZgCEdydIY6Ba0WbagtcCNjK7VWyNKK3oAaXoaK1y+qGETlPmetJgkCEQcKgaS2p4eazWkte6Jw3oICMAL0sAA646MAKwXoaqiyJKnQX6La6gZahgNiHWpq6mwYTGrqhm7K-qlmn6QWI6yUneDvBQuUTanG+OwaoOomvKlLbUW6kCcU5O6ODKLKAFC8hmpa+O3a7UNFe8z4Lg6EMCiKIvA6KeUqK4afH4AgE4LODUYtIM4AHyaIEweA40PUxy4vNFcOFxbgZdGKGKEgTGApAwJes-Z7OiP5ZiNcUQ5M8u7KKFf5GFUSMzftSw94QaoqNiUeug4QUlWe-ip015clNsTtUEf-CM442EZwqAd+p0bC+0djOfXkRlaMa8QhQxCNUK1EaQuo2EaBn0aB66d7b0cOYvKCH84ceRRxC+6-AusEO+kwMgUlY6EweMEG6gF6p+pSp0muR1ImTdIdIBhe58bjPkL4AaSUfdVtFMI9LtcBzGEsMvZtPh9tTtNlT1fi6uBqAwS6Cvb+agNcIqGB5dXgOgRgTGbgAaVO9a79X9HJSofJKsSeDRl62-FkDRoM3RlmH9RaIxvJK0Uxhcah+6M+6VdIPu9OVWdSYhkADkFgR+qe5+p-BymRn4WYg0i0sDLEHEPFL0b4H0bybkDkOQcTXB2+ztEwaECAXgYJ8JuhsJqOcOdSUBjh2RvRHwcgBAC04cIkbgNA3Jy3WvL-M4iuYtOhdiAEiabow+gzHehWLUZMp0Y+5iZy0SDFO02h+-SpvQR1X+RcDS4i+QMZ+QLMgpfSl8Vh-UpS9SBey07RnpgwNeivInJmPRiutZ3CXKeuV8deuq+uHo45bwGfTGLesQa5m8jZlyhZgujx88e0g0nQZ0dsk40DDwqIz8KRA0dvKAJ4OUHhCAe8cQd4e8IMEMc4rIih3KOpwI0JiGpxEsJkHZh094G2YAbxge58Dw7ECCH4fxnbH8UlfxgJCnFMFl7JkAAoMgCgVseMH0ZdMgD9UGfKAmNe5ZqM+QZ0Iqm8nM+g-KWWd+0VksM4YrXAaBw2OXKcIhrlu+RsOITlsekAF4PTEcKAMhwyWB0GADcaYVvrOEMpVV9VpkLVnHM4RWwyS6G2ADUV2gJwsGLyzKgwNV0-DV+6NA-VpsGJ2lnEMgTR4N0N5xGqWRd4PI4EH8clt1qcdIEwK4d+K4acK4HCZ0RjHCWsMbK4PYiCbhoVkVp1kN9VxYANlwtwjwokXoWC8l7yC8r8gY6gMgdxmGd13V419WUlKBTyNVNB6KJp3ZPFokK4G-T8NYAYn+yLGZ7BYvMQcaHRh14cCFeQRG0wHY2SY57geA0lZsjFZs68R4-MAgAAVqWOnDRAKTQynCFr1DTE+2jWhM7wLCPf3mIGBAzRF3RAQEJiKpbtx3iDEEg5nPhN11rB7ohpZGnE1sZgw5e0PGftsNAceCj3fj-x3K-vE3udMGXb1EXGzE1ASgdR8viV-xshUlfxIK9HfjINb0aychmvGQ3BolJrEDlbYmOhilYg1VbRMHx3pVWPWIpHNQwMgLOMjQAA4nCb5XCIp3DMQvgb5-7EInCIBMZ4J99gBYm0CtP77gY2xmE1AWIUDWP0D2P3hOOXOQJGsk7ohnSrQot3lBn+QSovTTO71zOPC52MIliYW7OHP8ovAJFIUAujJHOb5+nrnkunPWnMDXOuOvQPO2I0xk8vQb5EJ7w8IBAuG+oSuiqT25BFoEJxC2UnCcC8CCCiClOx8+YqCNA-s8D77KvOEgPaudgfAliQux0wvMQ0CgOovbOkB7PWJQEaw2O2m3O2n8vRJXkR7T3jR8pEKkBmspnzx7n4LT2K4OIrPkUDBhKzLYyCKqw4osWjttu6u5ADvBxegDPIpZEY45x3hnQaowxcAs1UP7UeHIXgsE01iFD2w7JnmIkruaJiFigzxGoqlOlnDFpUwiGBozo5OYfvA4HceEIPCzrxXPwsf-ztxXy+M6wzMnu4xJvIkJRyd5OfQCIdvTvXu1xDUvuCBVpWtPuTUBwTgORVoAT5F+NDY59FSVI7wXjT4Nw7xefhfDwfVRetEHg2QCBlAWCCB3JYBqACBIMNHjeGfgHxWzoNeDtgie234vyojfLupvZjpXAh0G6AjNHBjIRwISxO21Ko8FRWHgB83C3i3S3y3K2Fg9vtPwuHDDxhjYiLzjRNH1w2jRiU-48B5kYXmVV3i2UOMnezJl1oo58YkUk48I65w-SoBNqil+rzfCw0GSpSpihJVI8iXDbrw4e6g1Qzgyo2QyBSEx5A0MfClB2iHuNe-Xg4mdAbiGmB2F0s165F-xWNHB2dxe-zgkBF9KfxfwUNf9-YBQEiABjLpT-K8V-B21-F-N-EJt-d+5BUwj-cBD-QqT+CJ4kBj1+OaJeSAXJ4kkCKUEamvwlYzQwLG4gJW3bBhOosTJ4oBlgGs8CeaIDFp1F6KRQcG14Nql2ANbNgUiWiccDgJ7Bmt4ApITEIMAgB5Q1cNvV0lAQ-aKQv2OzccI8j2Zd9XSw8TqF7EdRrQdCGhApC3AaZypUg1HVihX24ApJ3IN0S3APBajdwMs00YpDszWiQDJKJWPUD5z8ToD8+M+cZIuA4jUwXwBMDiDhzaqbNXUjfefNBHqwr8YIpmN8oU1PDF458JYDgZxT0HLheB9nEgAIIoLCCyoTBIfmQjIDuR1+j1DgYvx2bL81wTPQYiz2h4mpsM6A-nnIjPqUt7+ZwHfswD36hVX+wxCkO-2EThhcomgl5toLYEwgrGcgqaJxQEweD1C9nbgAIKz5+DFwTBRJOINSSgQpBYQqoX3AqSRCFEW-DIY-wwjKIchb-CXvqHC6OIkBCQtcEkPkyKh0B-Rd7KVDGxvs1o6GL9rgB4QGA1cOZBsv3lwCMY9hOZUjhYM-A3E+WBgG4hCgbIGAeEEKNJhFBLA080O8IaJl-ViZ0sEmSZGfAYDGxXY7EeMQEcTC0RpC++mQqeE-zGH6UJhlAaJMOCn6IQZ+dLefsv1MYDFxBGpZdElA17CNSyeQlqIexq6ntRukQH0jXwDI0RlhhkAWFPBayTkDAjGBkXNjYiLZag9QZOOthODnBLg6ZKaAtleBLYdAwwBsrgEtAKAXhowdbCtgkCNlwg8sOfq2GlEtBPgrEZoFYB0ANkAABi4B0A6BlAIgLAFYBPYvBKwkNcnGQB0Bmos03iTTl4HSBGiTRLgPUYqM5A6AzRdXGEGqO0BfBNR2o+UW6INHOipSMRAgOtjtHaApapgcMSxh0BWAoxN8GQOaJTBOjbAxo4ICGMZyegwxF0CMS0CTExi4x2oHQOgPWwmleAfSHQJTjEDJwFAkoqRIBx0BL0TA+ufUYaKGRZh9irwWULZTtFsoAx9ouvKmJIAgQdAYIPkDBl4CAcWM6QLMQaJ0AABJHCKYA7F2AuxsgBccoE3E9iiAfYgwAOP9EGAtRw4lMd6ITwTipxzdWcaJAXEGjK2a43kIaNsC7jtxu4iCL2NOD9jgAg4k8deN76DA+EOkFPNqCsA8JswOEMbBuM9DdjggbolwEqOzC+l1s6o48VqN1HriKUEIQEBB28DScBE4icwL0G6CAgKAI0EJH30nGxxu4BYDQDywYhkgFgtAEiWCCkQwAUazEkiRPmfEGi7RNxFUfkj9G5teJOgNIlzDJBliXmNonQEWIM68BmgqIUaDoAGiBjJAOoo4DOPiA-gNsAwKUmSCZzLxZAGAEyTqJ0AExrx8kkSYuNknAAvRxRYSeuNsDYT4JYQZOLLEmwjh3gIOQILABBwSjfgz4tpDoEHGBSbJsIGASOO9HrY2QHYxcQgKVaIQYpcUg0QlLWDrYEpPiershHS4UMvA-ZDsZkHNThADRVKYlPSlCkpSEpTYuQGyiqmRTAJYgYCcmFAmFTe8z4jsRdGMxEBcJ0IJqfABAn1BKpokhKfJPWy8BNJ6cPQMuFJDkgBQHIAcHyF1ToTRRKU1KZFLGktATAk07SfDBMnggIpIYG8bVPZGiSDRToV0O6E9ACgVpkoy6JnEbRBIJJEhf0dDlaDtAdAQEVoHqEFq2d0o2sMkGymhxtB2g-o8KeDOKk2SdQ9Uo6TVPaRtSOxHYp0LGPzHDSbJFxSKeeItHKB3pOgIkIp3axAJ4wMkkwByAtYIFnxmQRGc+LhkhSwZYUxcc8PySZTbgBFHQMhIeQIDDYhUlwDqC2AGT2AKYJQPjkpxSAJgFsTNEoBQCpBlg2QAQEoG8gEAygIABXrsCEBwtVpz4knAMDNRkzeZYQB8GRV5AMztZJAM1ITIUC8zxg0QCWdMCSAgBpZ5gAACwZBmAqwHIEICOBEAMgQAA)